vue数据双向绑定初识

最新推荐文章于 2023-04-26 17:00:39 发布

赵云0726

最新推荐文章于 2023-04-26 17:00:39 发布

阅读量157

点赞数

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

本文链接：https://blog.csdn.net/m0_47230916/article/details/108035940

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

默认情况下Vue只支持数据单向传递M–> VM–>V，但是由于Vue是基于MVVM设计模式的，所以也提供了双向传递的能力。
可以用 v-model 指令在表单、及元素上创建双向数据绑定
注意点：v-model会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源

<body>   
    <div id ="app">
        <p>{{name}}</p> 
        <input type="text" v-model="msg">
    </div>
    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        // 这里是model
        data: {
            name:"赵四",
            msg:"哈哈哈"
        }

     });
    </script>
</body>

首先是通过v-model的值和data中的msg的值对应起来，这样input中就会渲染出 msg的值。也是
M–> VM–>V的数据传递
然后运行结果是：在这里插入图片描述
然后直接修改msg的数据，相应的input中的数据也会发生变化，这就是v->vm->m的数据传递。

赵云0726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue数据双向绑定初识

**vue数据双向绑定初识**默认情况下Vue只支持数据单向传递M–> VM–>V，但是由于Vue是基于MVVM设计模式的，所以也提供了双向传递的能力。可以用 v-model 指令在表单、及元素上创建双向数据绑定注意点：v-mode会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源<body> <div id ="app...
复制链接

扫一扫