Vue中的数据绑定

vue中的绑定

一.单向数据绑定

1. 语法:v-bind:href ="xxx" 或简写为 :href

2. 特点:数据只能从 data 流向页面

二.双向数据绑定

1. 语法:v-model:value="xxx" 或简写为 v-model="xxx"

2. 特点:数据不仅能从 data 流向页面，还能从页面流向 data

备注:

1.双向绑定一般应用于表单类元素上(如:input select)

2.v-model:value 可以简写为v-model,因为v-model 默认收集的就是value值

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

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