vue学习笔记3----数据绑定

最新推荐文章于 2023-10-15 14:50:02 发布

lazy91

最新推荐文章于 2023-10-15 14:50:02 发布

阅读量439

点赞数

分类专栏： Vue 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_59954212/article/details/126319827

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

数据绑定

将model和view绑定起来。例如value="name"，data中的name值发生变化，输入框中的值也会发生变化。

单向数据绑定与双向数据绑定

vue中有2种数据绑定的方式：

单向数据绑定（v-bind）：数据只能从data流向页面；
双向数据绑定（v-model)：数据不仅能从data流向页面，还可以从页面流向data；

备注：

双向数据绑定一般都应用在表单类（输入类）元素上 （如：input、select等，有value属性的）；
v-model：value 可以简写为 v-model，因为v-model默认收集的就是value的值；

单向数据绑定：就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了；

双向数据绑定：在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了

代码示例

<body>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/>

        <hr/>
        <h2>简写</h2>
        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name"><br/>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
            el:'#root',
            data:{
                name:'百度'
            }
        })
    </script>
</body>

如上代码段中，若对双向绑定的输入框修改数据，单向绑定的输入框也会改变，所有输入框显示内容都一样。

双向数据绑定的输入框中内容改变，导致data中name值改变，name值的改变导致单向绑定输入框的显示内容改变，一个连锁反应。

参考vue单向数据绑定和双向数据绑定_菜鸟上道请多指教的博客-CSDN博客_vue单向绑定