实例详解Vue中v model指令的用法

介绍

v-model是一个常见的指令，用于在Vue中实现双向数据绑定。

v-model指令用于创建一个双向绑定，即当元素的值发生改变时，我们的数据也会更新。同样的，当数据发生改变时，输入框中的值也会相应地更新。

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，我们创建了一个 input 元素，并使用 v-model 绑定到了 data 中的 message 属性。当 input 的值发生改变时，message 属性的值也会相应地更新，反之亦然。

修饰符

v-model支持许多修饰符，这些修饰符可以轻松地对用户的输入进行格式化：

• .lazy - 默认情况下，v-model 会在每次 input 事件触发后同步输入框的值与数据。使用 .lazy 修饰符，将会转变为使用 change 事件触发同步。
• .number - 如果要将输入值转换为数值，请添加 .number 修饰符。
• .trim - 如果要过滤用户输入的首尾空白字符，请添加 .trim 修饰符。

下面我们来看一个用到了这些修饰符的例子：

<template>
  <div>
    <input v-model.lazy="message">
    <p>{{ message }}</p>

    <input v-model.number="num">
    <p>{{ num }}</p>

    <input v-model.trim="str">
    <p>{{ str }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: '',
      num: '',
      str: ''
    }
  }
}
</script>

在这个例子中，.lazy 修饰符将在 change 事件触发后更新数据；.number 修饰符将在输入数值时将其转换为数值；.trim 修饰符将首尾空白字符过滤掉。

与自定义组件的配合使用

v-model 不仅仅用于输入框这种常规的 HTML 元素，也可以与自定义组件配合使用。我们可以使用 model 选项来指定组件如何将值读取和更新。

下面我们来看一个自定义组件的例子，这个组件显示一个 Star 的评分，用户可以通过单击来选择该组件的值：

<template>
  <div>
    <span class="star" v-for="n in 5" :class="{ active: n <= value }" @click="setValue(n)"></span>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    setValue (value) {
      this.$emit('change', value)
    }
  }
}
</script>

在这个例子中，model 选项指定了该组件会通过 value prop 来接收值，并且会触发一个叫做 change 的事件来更新外部数据。

现在我们可以在父组件中使用 v-model 来对该组件进行绑定：

<template>
  <div>
    <star-rating v-model="rating"></star-rating>
  </div>
</template>

<script>
import StarRating from './StarRating.vue'

export default {
  components: {
    StarRating
  },
  data () {
    return {
      rating: 3
    }
  }
}
</script>

在这个例子中，我们创建了一个名为 rating 的数据属性，并将其绑定到 star-rating 组件上。现在当这个组件被修改时，数据会相应地更新，反之亦然。

总结

v-model 是开发 Vue 应用的一个强大工具，可以提高开发效率并减少代码量。除了用于简单的输入框之外，它还可以和自定义组件配合使用，极大地提高了开发的灵活性。使用 .lazy、.number、.trim 等修饰符可以进一步定制 v-model 的行为，从而完全满足我们的需求。