v-model在vue3的作用

在Vue3中，v-model仍然是用于双向数据绑定的指令。它的作用是将表单元素（如input、textarea、select等）的值与Vue实例中的数据双向绑定，即当表单元素的值发生改变时，Vue实例中的数据也会同步更新；反之，当Vue实例中的数据发生变化时，表单元素的值也会自动更新。

在Vue3中，v-model指令的使用方式与Vue2中略有不同。对于大多数表单元素，可以直接使用v-model来实现双向绑定。例如：

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

这里的message是Vue实例中的一个数据，它与input元素的value值双向绑定。当input元素的值发生变化时，message的值也会相应地更新；反之，当message的值发生变化时，input元素的value值也会自动更新。

对于一些特殊的表单元素，例如单选框和复选框，v-model的使用略有不同。例如：

<!-- 单选框 -->
<div>
  <input type="radio" id="male" value="male" v-model="gender">
  <label for="male">Male</label>
</div>
<div>
  <input type="radio" id="female" value="female" v-model="gender">
  <label for="female">Female</label>
</div>

<!-- 复选框 -->
<div>
  <input type="checkbox" id="apple" value="apple" v-model="fruits">
  <label for="apple">Apple</label>
</div>
<div>
  <input type="checkbox" id="banana" value="banana" v-model="fruits">
  <label for="banana">Banana</label>
</div>

这里的gender和fruits都是Vue实例中的数据，它们与单选框和复选框的选中状态双向绑定。当单选框或复选框的选中状态发生变化时，gender和fruits的值也会相应地更新。需要注意的是，单选框和复选框的value值必须与v-model绑定的数据类型匹配，否则会出现意料之外的结果。