vue 在form表单里怎么双向绑定

在 Vue 中，可以使用 `v-model` 指令来实现表单元素的双向绑定。`v-model` 实际上是语法糖，它会自动为表单元素绑定 value 或 checked 属性，并监听元素的 input 或 change 事件，从而实现数据的双向绑定。

下面是一个简单的示例：

<template>
  <div>
    <form>
      <label>姓名:</label>
      <input type="text" v-model="name">
      <br>
      <label>性别:</label>
      <input type="radio" value="男" v-model="gender">男
      <input type="radio" value="女" v-model="gender">女
      <br>
      <label>爱好:</label>
      <input type="checkbox" value="篮球" v-model="hobbies">篮球
      <input type="checkbox" value="足球" v-model="hobbies">足球
    </form>
    <p>姓名：{{ name }}</p>
    <p>性别：{{ gender }}</p>
    <p>爱好：{{ hobbies }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      gender: '',
      hobbies: []
    }
  }
}
</script>

在上面的示例中，我们使用 `v-model` 指令分别绑定了文本输入框、单选框和复选框。当用户在表单元素中输入或选择内容时，对应的数据会自动更新；当数据改变时，表单元素的值也会自动更新。