Vue.js 中的 v-model 指令及绑定表单元素的方法

当使用 Vue.js 开发表单时，经常需要将表单元素的值（如文本输入框、单选框、复选框等）与 Vue 组件中的数据进行绑定，这就需要用到 Vue.js 中的 v-model 指令了。下面是具体的操作方法：

绑定文本输入框的值

将文本输入框的值与 Vue 组件中的 data 属性进行双向绑定的方法，示例如下：

在 Vue 组件的 template 中，定义一个文本输入框：

<input type="text" v-model="message">

在 Vue 组件的 data 中，定义一个 message 属性：

data() {
  return {
    message: ''
  }
}

这样，当文本输入框的值发生改变时，Vue 组件中的 message 值也会跟着改变；当 Vue 组件中的 message 值发生改变时，文本输入框的值也会自动更新。

绑定单选框或复选框的值

将单选框或复选框的值与 Vue 组件中的 data 属性进行绑定的方法，示例如下：

在 Vue 组件的 template 中，定义一个单选框或复选框：

<input type="checkbox" v-model="checked">

在 Vue 组件的 data 中，定义一个 checked 属性：

data() {
  return {
    checked: false
  }
}

这样，当单选框或复选框的值发生改变时，Vue 组件中的 checked 值也会跟着改变；当 Vue 组件中的 checked 值发生改变时，单选框或复选框的值也会自动更新。

示例说明

示例一：全选/全不选

<template>
  <div>
    <input type="checkbox" v-model="allSelected"> 全选/全不选
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.checked"> {{item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allSelected: false,
      items: [
        {text: '选项1', checked: false},
        {text: '选项2', checked: false},
        {text: '选项3', checked: false},
        {text: '选项4', checked: false}
      ]
    }
  },
  watch: {
    allSelected(val) {
      this.items.forEach(item => {
        item.checked = val
      })
    }
  }
}
</script>

在这个示例中，我们使用了 v-model 指令将“全选/全不选”复选框的值与 Vue 组件中的 allSelected 属性进行绑定，将每个选项的复选框的值与 Vue 组件中的 items 数组中的每一项的 checked 属性进行绑定。

当“全选/全不选”复选框的值发生改变时，使用 watch 监听其变化，并将 items 数组中的每一项的 checked 属性值同步更新。当某个选项的复选框的值发生改变时，其对应在 items 数组中的项的 checked 属性值也会自动更新。

示例二：计数器

<template>
  <div>
    <input type="number" v-model.number="count"> <button @click="add">增加</button>
    <p>当前数量：{{count}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
    }
  }
}
</script>

在这个示例中，我们使用了 v-model.number 指令将文本输入框的值与 Vue 组件中的 count 属性进行双向绑定。由于文本输入框的值默认是字符串类型，我们使用 v-model.number 来将其转换成数值类型。

同时，我们绑定了 button 元素的 click 事件，实现了增加计数器的功能。当 count 属性值发生改变时，其所绑定的文本输入框的值也会自动更新。