怎么用vue.js实现双向绑定
使用 Vue.js 实现双向绑定
Vue.js 通过 v-model 指令实现双向绑定，主要用于表单元素与数据的同步更新。以下是具体实现方法：
基本语法
在模板中使用 v-model 绑定数据属性：
<input v-model="message" placeholder="输入内容">
<p>输入的内容是：{{ message }}</p>在 Vue 实例中定义数据：
new Vue({
el: '#app',
data: {
message: ''
}
})表单元素支持
-
文本输入框
<input type="text" v-model="textValue"> -
多行文本
<textarea v-model="multilineText"></textarea> -
复选框
单个复选框绑定布尔值：<input type="checkbox" v-model="isChecked">多个复选框绑定数组：
<input type="checkbox" value="A" v-model="checkedItems"> <input type="checkbox" value="B" v-model="checkedItems"> -
单选按钮
<input type="radio" value="Option1" v-model="selectedOption"> <input type="radio" value="Option2" v-model="selectedOption"> -
下拉选择框
<select v-model="selectedOption"> <option value="A">选项A</option> <option value="B">选项B</option> </select>
修饰符
-
.lazy
将输入事件改为change事件触发同步：<input v-model.lazy="message"> -
.number
自动将输入转为数字类型：
<input v-model.number="age" type="number"> -
.trim
自动去除首尾空格：<input v-model.trim="message">
自定义组件双向绑定
在自定义组件中实现 v-model 需要定义 value prop 和 input 事件：
Vue.component('custom-input', {
props: ['value'],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
`
})使用时与原生元素一致：
<custom-input v-model="message"></custom-input>原理说明
Vue.js 的双向绑定本质是语法糖，等价于：
<input
:value="message"
@input="message = $event.target.value"
>
