Vue数据绑定

最新推荐文章于 2024-04-12 15:32:24 发布

小强打不死、

最新推荐文章于 2024-04-12 15:32:24 发布

阅读量200

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_71181899/article/details/125728608

版权

本文介绍了Vue.js中的数据绑定概念，包括单向绑定(v-bind)和双向绑定(v-model)。单向绑定使得数据只能从data流向视图，而双向绑定则允许数据在data和视图之间双向流动。文中展示了两种绑定方式的使用示例，并强调了v-model通常应用于表单元素上的注意事项。同时，错误地将v-model应用于非表单元素会导致问题。

摘要由CSDN通过智能技术生成

文章目录

一、单项绑定
二、双向绑定
三. 注意事项

一、单向绑定（v-bind）

单项绑定(v-bind)：数据只能从data流向页面

单项绑定普通写法
<input type="text" v-bind:value="name">
单向绑定简写方法
单向数据绑定：<input type="text" :value="name">

 <script>
        Vue.config.productionTip = false // 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data: {
                name: '张三'
            }
        })
    </script>

二、双向绑定（v-model）

双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

<div id="root">

双向绑定普通写法
 双向数据绑定：<input type="text" v-model:value="name">

双向绑定简写方法
双向数据绑定：<input type="text" v-model:value="name">

</div>

 <script>
        Vue.config.productionTip = false // 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data: {
                name: '张三'
            }
        })
    </script>

2.注意错误写法

代码如下（示例）：

 如下代码是错的，因为v-model只能应用在表单元素(输入类元素)上
 <h2 v-model:y="name">你好啊</h2>

 <script>
        Vue.config.productionTip = false // 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data: {
                name: '张三'
            }
        })
    </script>