如何在vue中格式v-model的值

在 Vue 中，你可以使用计算属性来格式化 `v-model` 的值。例如，假设你想要在一个输入框中输入数字，并将其格式化为货币格式（例如 `1,000.00`）。你可以这样做：

<template>
  <input type="text" v-model="formattedValue">
</template>

<script>
export default {
  data() {
    return {
      value: 0
    }
  },
  computed: {
    formattedValue: {
      get() {
        return this.value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
      },
      set(value) {
        // 将输入的字符串转化为数字
        const parsedValue = parseFloat(value.replace(/,/g, ''));
        // 如果转化成功，则更新值
        if (!isNaN(parsedValue)) {
          this.value = parsedValue;
        }
      }
    }
  }
}
</script>

在这个例子中，我们定义了一个名为 `formattedValue` 的计算属性来格式化 `v-model` 的值。当用户输入一个新值时，`set` 函数将被调用，该函数会将输入的字符串转换为数字并将其存储在 `value` 数据属性中。当渲染输入框时，`get` 函数将被调用，该函数将 `value` 属性的值格式化为货币格式并返回。