vue实现双休绑定
Vue 实现双向绑定
Vue.js 通过 v-model 指令实现双向绑定，主要用于表单输入元素（如 <input>、<textarea>、<select>）与组件之间的数据同步。以下是具体实现方式：
表单元素的双向绑定
在表单元素上使用 v-model，Vue 会自动处理值的绑定和更新：
<input v-model="message" placeholder="输入内容">
<p>输入的内容是：{{ message }}</p>data() {
return {
message: ''
}
}v-model 会根据输入元素的类型自动选择正确的方式更新数据（如 text 和 textarea 使用 value 属性，checkbox 和 radio 使用 checked 属性）。
自定义组件的双向绑定
在自定义组件中实现双向绑定，需使用 model 选项和 $emit 事件：
<custom-input v-model="message"></custom-input>Vue.component('custom-input', {
props: ['value'],
model: {
prop: 'value',
event: 'input'
},
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
`
})通过 model 选项指定绑定的属性和事件，子组件内部通过 $emit 触发更新。
修饰符
v-model 支持修饰符来调整行为：
.lazy：将input事件改为change事件（延迟同步）<input v-model.lazy="message">.number：自动将输入转为数字类型<input v-model.number="age" type="number">.trim：自动去除首尾空格<input v-model.trim="message">
原理
Vue 的双向绑定本质是语法糖，结合了 :value 属性绑定和 @input 事件监听：
<input :value="message" @input="message = $event.target.value">v-model 在组件中同样基于这一机制，通过 prop 和事件实现父子组件数据同步。
