Question

我有一个v卡，其中包含使用v模型填充的v文本字段。出现的v模型是一个时间，它显示HH：MM：SS，但我只希望它向用户显示HH：MM。如何格式化v文本字段中填充的内容？

我尝试使用：input和其他各种更改事件，但是在用户单击v-text-field之前，没有一个填充这些事件，并且我希望在他们单击“编辑”卡后立即对其进行格式化

<v-text-field
  slot="activator"
  v-model="time.start"
  v-bind:label="$t('times.start')"
  prepend-icon="access_time"
  :rules="timeStartRules"
  @focus="$event.target.select()"
  required>
</v-text-field>

如何格式化“ time.start”，使其为HH：MM而不是HH：MM：SS。或者，更一般而言，如何调用函数来修改v-text-field中显示的文本？

Answer 1

您可以使用computed方法。

示例：

<v-text-field
   slot="activator"
   v-model="formattedStartTime"
   v-bind:label="$t('times.start')"
   prepend-icon="access_time"
   :rules="timeStartRules"
   @focus="$event.target.select()"
   required
 ></v-text-field>

export default {
  data () {
    return {
      time: {
        start: '12:34:56'
      }
    }
  },
  computed: {
    formattedStartTime () {
      return this.time.start.substring(0,5);
    }
  }
}

文档：https://vuejs.org/v2/guide/computed.html

使用v-model

1 个答案: