javascript - 使用v-model时调整v-text-field的值

Question

我有一张 v-card，其中包含一个使用 v-model 填充的 v-text-field。传入的 v-model 是一个时间，它显示 HH:MM:SS，但我只希望它向用户显示 HH:MM。如何格式化 v-text-field 中填充的内容？

我尝试过使用 :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

您可以使用计算方法。

示例:

<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://v2.vuejs.org/v2/guide/computed.html