vue实现数据双向
在Vue中实现数据双向绑定主要依靠v-model指令，它结合了属性绑定和事件监听，适用于表单元素或自定义组件。以下是具体实现方式：
基础表单元素的双向绑定
对于原生表单元素（如input、textarea、select），直接使用v-model绑定数据即可：
<input v-model="message" placeholder="输入内容">
<p>当前值：{{ message }}</p>data() {
return {
message: ''
}
}自定义组件的双向绑定
在自定义组件中实现双向绑定需要显式定义model选项并触发更新事件：
<custom-input v-model="customValue"></custom-input>// 子组件
Vue.component('custom-input', {
props: ['value'],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
`
})
// 父组件
new Vue({
data: {
customValue: ''
}
})修饰符的使用
v-model支持修饰符来优化交互行为：
.lazy：将输入事件改为change事件（失焦后更新）.number：自动将输入转为数字类型.trim：自动去除首尾空格
<input v-model.lazy="msg">
<input v-model.number="age" type="number">多选框和单选框的特殊处理
对于多选框组，绑定到数组会自动收集所有选中值：
<input type="checkbox" v-model="checkedNames" value="Jack">
<input type="checkbox" v-model="checkedNames" value="Mike">data() {
return {
checkedNames: []
}
}自定义组件的进阶用法
Vue 2.3+支持通过model选项配置自定义prop和event：
model: {
prop: 'selected',
event: 'change'
}Vue 3中可以使用多个v-model绑定：
<user-name
v-model:first-name="firstName"
v-model:last-name="lastName"
></user-name>
