Vue 3 的 v-model 是一个语法糖，它为表单输入和应用状态之间创建了双向绑定。这样，当用户在表单中输入时，数据会自动更新，反之亦然。
说明
在 Vue 3 中，v-model 实际上是基于 value 属性和 input 事件实现的。这意味着你可以使用 v-model 来监听 input 事件，并且当输入变化时，v-model 会自动更新数据。
使用方法
在表单元素上使用 v-model：
html<template> <input v-model="message" /> </template> <script> export default { data() { return { message: '' } } } </script>
代码示例
文本输入框：
<template> <div> <input v-model="message" placeholder="输入文本" /> <p>你输入的文本是: {{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } } } </script>
复选框：
对于复选框，你可以使用数组来绑定多个选项。当用户选择或取消选择一个选项时，数组会自动更新。
<template> <div> <input type="checkbox" v-model="checkedList" value="选项1" /> 选项1<br /> <input type="checkbox" v-model="checkedList" value="选项2" /> 选项2<br /> <ul> <li v-for="item in checkedList" :key="item">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { checkedList: [] } } } </script>
选择框：
对于选择框，你可以使用对象或数组来绑定多个选项。当用户选择或取消选择一个选项时，对象或数组会自动更新。
使用对象：
<template> <div> <select v-model="selectedOption"> <option v-for="option in options" :key="option.value" :value="option.value"> {{ option.text }} - {{ option.value }}元 </option> </select> <p>你选择的选项是: {{ selectedOption }}</p> </div> </template> <script> export default { data() { return { options: [ { text: '选项1', value: '1' }, { text: '选项2', value: '2' }, { text: '选项3', value: '3' } ], selectedOption: '' } } } </script>
