v-model是什么？怎么使用？

`v-model` 是Vue中的一个指令，用于实现双向数据绑定。它可以将表单控件中的数据与Vue实例中的数据进行绑定，实现数据的同步更新。

使用 `v-model` 的基本语法如下：

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

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    }
  }
</script>

在上面的例子中，我们使用 `v-model` 指令将 `<input>` 元素中的值与 `message` 数据进行绑定。当用户在输入框中输入内容时，`message` 数据会自动更新；反之，如果我们在Vue实例中更新了 `message` 数据，输入框中的值也会随之更新。

需要注意的是，`v-model` 只能用于表单控件（如 `<input>`、`<textarea>`、`<select>` 等），并且要求表单控件必须具有 `value` 属性。此外，对于一些特殊的表单控件，如单选框和复选框，需要使用不同的写法。例如，对于单选框，我们可以使用 `v-model` 将选中的值与数据进行绑定，如下所示：

<template>
  <div>
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">男</label>
    <br>
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">女</label>
    <p>您选择的性别是：{{ gender }}</p>
  </div>
</template>

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

在上面的例子中，我们使用 `v-model` 将选中的值与 `gender` 数据进行绑定。当用户选择男或女的单选框时，`gender` 数据会自动更新；反之，如果我们在Vue实例中更新了 `gender` 数据，单选框中的选中状态也会随之更新。