vue中v-model属性

在Vue中，v-model是一种实现表单输入和应用状态之间双向绑定的常用方式。它会根据不同的表单元素类型自动选择正确的方法来更新应用程序状态。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源[^1]。

例如，在一个文本框中，你可以使用v-model将文本框的值绑定到Vue实例的一个变量上，这样当用户输入文本时，变量的值会自动更新，反之亦然。示例代码如下所示：

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

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

在这个例子中，我们使用v-model将文本框的值绑定到`message`变量上，并将`message`的值显示在页面上。

除了文本框，v-model同样可以用于实现单选按钮、复选框、下拉列表等表单元素的双向绑定。例如，你可以使用v-model在下拉列表中选择一个选项，并将选择的值绑定到Vue实例的一个变量上，如下所示：

<template>
  <div>
    <select v-model="selected">
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
    <p>你选择的水果是：{{ selected }}</p>
  </div>
</template>

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