單項數據綁定用“v-bind”指令,數據隻能從Vue實例的data屬性流向頁面,當data屬性值發生變化,頁面中對應的值也會随之變化,但頁面中的值變化,不會對data屬性值産生影響。
模闆容器和Vue實例
<body>
<div id="root">
<input type="text" v-bind:value="name">
<span>{{name}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
修改input框内的值,Vue實例data中的name不會發生變化,因此span标簽内的值也不會發生變化
v-bind指令的簡寫形式
<body>
<div id="root">
<input type="text" :value="name">
<span>{{name}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
雙向數據綁定用“v-model”指令,數據不僅能從Vue實例的data屬性流向頁面,還可以從頁面流向data屬性,當data屬性值發生變化,頁面中對應的值也會随之變化,反之頁面中的值變化,對應的data屬性值也會随之變化。
模闆容器和Vue實例
<body>
<div id="root">
<input type="text" v-model:value="name">
<span>{{name}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
修改input框内的值,Vue實例data中的name值也會随之發生變化,從而引起span标簽内的值發生變化
v-model指令的簡寫形式
<body>
<div id="root">
<input type="text" v-model="name">
<span>{{name}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
注:雙向綁定一般都應用在表單類元素上,如input、select等。
,