Vue:v-bind单向绑定和v-model双向绑定的区别_v-bind为什么是单向绑定-CSDN博客

本文链接：https://blog.csdn.net/Laollaoaolao/article/details/119699095

本文介绍了Vue中的v-bind和v-model特性。v-bind用于单向绑定，确保数据只能从data流向视图，如在input元素中绑定value属性。而v-model实现双向绑定，允许数据在data和视图之间实时同步，例如在input元素中改变值时，data中的对应属性也会更新。示例展示了v-bind和v-model在input和a标签中的应用，并强调了简写形式的正确使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.v-bind(单向绑定)

v-bind表示单向绑定,数据只能从data流向页面

v-bind能解析表达式

举例

如下gif图,通过在input中单向绑定value值为data中的name,当改变input框中的值时,data中的值不会发生变化，故页面上的{{name}}也变化,只有改变data中的name时，value才会发生变化，这就是单向绑定

    <div id="id">
       单向绑定: <input type="text" v-bind:value="name"/>{{name}}
    </div>

new Vue({
        el:'#id',
        data:{
            name:'zzm',
            url:'https:www.baidu.com'
        }
    })

在这里插入图片描述

如果我们想在a标签中添加url，除了最原始的方式，也可以利用vue中的v-bind

原始方式:

<a href="https:www.baidu.com">百度</a>

v-bind方式:

 <a v-bind:href="url">百度</a>

注意!!! v-bind:href可以简写成**:href**,但是一定要有‘:’符号,否则会将url解析成一个为‘url’的字符串

2.v-model(双向绑定)

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

举例

如下gif图,通过在input中双向绑定value值为data中的name,当改变input框中的值时,data中的值立即发生变化，页面上的{{name}}也同步变化，这就是双向绑定

<div id="id">
       双向绑定: <input type="text" v-model:value="name"/>{{name}}
    </div>

 new Vue({
        el:'#id',
        data:{
            name:'zzm',
            url:'https:www.baidu.com'
        }
    })

在这里插入图片描述