Vue:v-bind单向绑定和v-model双向绑定的区别

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'
        }
    })