复习Vue4:v-model
在前面讲解Vue
简介的时候,我们说过,如果Model
中的数据发生了变化,会通过ViewModel
通知View
更新数据,这个效果我们在前面已经讲过演示过了,现在演示一下当view
中的数据发生了变化后,怎样通过ViewModel
来通知Model
来完成数据的更新。
其实这就是我们常说的,“双向数据绑定”
怎样实现这种效果呢?通过v-model
来实现。
<!-- v-model指令用来双向数据绑定:就是model和view中的值进行同步变化 -->
<!-- v-model只能在input/textarea/selet 也就是表单元素-->
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>双向数据绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="userName" />
<span v-text="userName"></span>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
userName: "zhangsan",
},
});
</script>
</body>
</html>
怎样验证v-model实现了双向数据绑定呢?
我们只需要在input
里面输入数据 我们可以查看页面上的span
标签里面的内容会不会发生同步的改变,如果发生了同步的改变,那我们就实现了数据的双向绑定。
关于v-model
这个知识点,我在前面的Object.defineProperty中有讲解,我在后面也会详细讲解一遍。