Vue.js v-model: 如何在值小于 1 时显示 0

您可以使用计算属性来实现此功能。在计算属性中，如果值小于 1，则将其设置为 0，否则返回实际值。然后，在模板中使用该计算属性作为 v-model 绑定的值。

例如：

<template>
  <div>
    <input type='number' v-model='processedValue'>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0.5 // 初始值为 0.5
    };
  },
  computed: {
    processedValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.value = newValue < 1 ? 0 : newValue;
      }
    }
  }
};
</script>

在上面的示例中，我们定义了一个 data 属性 'value'，初始值为 0.5。然后，我们定义了一个计算属性 'processedValue'，该计算属性返回 'value' 属性的实际值（即 get 函数）。在 set 函数中，我们检查新值是否小于 1。如果是，则将 'value' 属性设置为 0，否则将其设置为新值。在模板中，我们使用 'processedValue' 作为 v-model 绑定的值，这样当用户输入小于 1 的值时，它们将自动更正为 0。