Vue —— 数据的单双向绑定 v-bind v-model

作者：Sam

1. 简介

v-bind与v-model都能用于vue中的数据绑定

2. v-bind

• 只能进行数据从js到页面的单向绑定，不能进行页面到js代码的绑定
• 可以作用在任何的属性上面

语法

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

可以将v-bind:href简写为:href

<a :href="url">test</a>

• 变量支持使用js表达式来进行处理

3. v-model

• v-model可以进行js代码到html，html到js代码的双向绑定，即修改html页面上的值，就会立即影响js代码中的值，修改js代码中的值，也会影响html页面上的值
• v-model并不是所有的标签都能使用的，默认只支持表单元素标签，这是因为v-model默认读取的是标签的value属性来进行数据的双向同步

语法

<div id="test2">
    <input type="text" v-model:value="username" placeholder="Input your username">
</div>

new Vue({
    el:'#test2',
    data:{
        username: 'Sam'
    }
})

v-model:value可以简写为v-model

<input type="text" v-model="username" placeholder="Input your username">