复习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中有讲解，我在后面也会详细讲解一遍。
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
