Vue系列教程（七）v-model和双向数据绑定

最新推荐文章于 2023-12-12 08:30:00 发布

胡亥

最新推荐文章于 2023-12-12 08:30:00 发布

阅读量544

点赞数 1

分类专栏： vue.js 文章标签： vue vue.js

本文链接：https://blog.csdn.net/iiiliuyang/article/details/104264586

版权

vue.js 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

v-model是Vue中实现双向数据绑定的指令。
看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model指令的学习</title>
</head>
<body>
<div id="app">
    <h4>{{ msg }}</h4>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '双向数据绑定'
        },
        methods: {}
    })
</script>
</body>
</html>

上面的vm实例是在浏览器内存中创建的，创建完成后，可以通过window.vm访问到这个实例：
在这里插入图片描述
打开这个对象，可以找到msg对象：

也就是说在data上定义的属性会自动挂载到vm对象上，所以我们可以用this.msg可以访问到data上的属性。

下面我们通过浏览器控制台修改msg的值：
在这里插入图片描述
我们发现页面上的值也自动改变了，这还不算双向数据绑定，这个是单向数据绑定。为了实现双向数据绑定，我们添加一个表单元素，代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-model指令的学习</title>
</head>
<body>
<div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" v-model="msg" style="width: 100%">
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '双向数据绑定'
        },
        methods: {}
    })
</script>
</body>
</html>