【vue】双向绑定__v-model指令如何帮你简化代码
测开也需懂的前端小知识
双向绑定------ v-model指令
双向绑定
Vue bom和dom层的双向绑定,实现数据实时更新。而传统的单向数据绑定一般是数据影响页面,页面不影响数据。
在Vue中数据改变,视图无需刷新即可实时改变,而jQuery中数据改变,视图需要用户手动刷新才会改变。
也就是说,对于vue,bom 层只需一个变量,变量值更新,dom层任何地方都可以同步到这个更新后的变量值。无论是前端去更新还是后台去更新这个变量,只要使用到该变量的任何地方都会实时更新。
Vue是通过 v-model 指令在表单 、 及 元素上创建双向数据绑定。
示例如下:
bom层
<script>
export default {
name: 'home',
data() {
return {
message: 'default data',
};
},
}
<script>
dom层
<input v-model="message" placeholder="edit me" />
<p>Message1 is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
<p>Message2 is: {{ message }}</p>
测试:修改第1个输入框的效果图
测试:修改第2个输入框的效果图
v-model 指令会根据控件类型自动选取正确的方法来更新元素。本质上就是个语法糖。它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。