vue指令-v-model

v-model 是 Vue.js 中的一个指令，用于在表单元素上创建双向数据绑定。

使用 v-model 指令，可以将数据绑定到表单元素上，当用户输入或选择数据时，数据会自动更新，反之亦然。

以下是 v-model 的详细解析和代码实例：

1. 表单输入元素： v-model 可以用于文本输入元素（如 <input>、<textarea> 和 <select>）上。它会根据表单元素的类型自动选择正确的方式来更新数据。

例如，我们在 Vue 实例的 data 选项中创建一个属性 message，将其绑定到一个文本输入框上：

<div id="app">
  <input v-model="message" type="text">
  <p>输入的内容：{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

当用户在输入框中输入文本时，message 属性会实时更新。同时，页面中展示的内容也会随之更新。

1. 复选框： 对于复选框，v-model 绑定的是一个布尔值（true 或 false）。当复选框被选中时，布尔值会变为 true；当复选框被取消选中时，布尔值会变为 false。

例如，在 Vue 实例的 data 选项中创建一个属性 checked，将其绑定到一个复选框上：

<div id="app">
  <input v-model="checked" type="checkbox">
  <p>是否选中：{{ checked }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    checked: false
  }
})

当复选框被选中或取消选中时，checked 属性会实时更新。同时，页面中展示的内容也会随之更新。

1. 单选框： 对于单选框，v-model 绑定的是被选中的选项的值。

例如，在 Vue 实例的 data 选项中创建一个属性 selected，将其绑定到一组单选框上：

<div id="app">
  <input v-model="selected" type="radio" value="option1">
  <input v-model="selected" type="radio" value="option2">
  <p>选择的选项：{{ selected }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    selected: ''
  }
})

当选中不同的单选框时，selected 属性会实时更新为对应的值。同时，页面中展示的内容也会随之更新。

1. 选择框： 对于选择框，v-model 绑定的是被选中的选项的值。可以通过 v-for 指令来动态生成选项。

例如，在 Vue 实例的 data 选项中创建一个属性 selected，将其绑定到一个选择框上：

<div id="app">
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">{{ option.text }}</option>
  </select>
  <p>选择的选项：{{ selected }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: [
      { value: 'option1', text: '选项1' },
      { value: 'option2', text: '选项2' },
      { value: 'option3', text: '选项3' }
    ]
  }
})

当选中不同的选项时，selected 属性会实时更新为对应的值。同时，页面中展示的内容也会随之更新。

通过 v-model 指令，可以方便地实现表单元素与数据的双向绑定，简化开发过程。