1. v-model 双向绑定
<input type="text" v-model="textValue" />
通过使用v-model对表单添加双向绑定,在页面上对表单内容的更改,也会改变其value值
<div>{{ textValue }}</div>
2. v-model 双向绑定原理
双向绑定的原理:单向绑定+input事件更改
<input type="text" :value="textValue1" @input="handleInput" />
通过:value 的单向绑定,再对其表单添加@input 事件,当input表单框内容发生变化时触发事件
const handleInput = (e) => {
textValue1.value = e.target.value;
};
获取事件对象event ,将其 event.target.value 获取到的页面表单更改的值,赋值给其value
从而实现v-model的双向绑定的功能