一听绳、v-bind是單向數(shù)據(jù)綁定, 而v-model是雙向數(shù)據(jù)綁定
v-bind是單向綁定，如果配合事件异赫，也可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定
二椅挣、適用的控件不同
- v-model適用范圍： 表單控件或者自定義組件
- <input>
- <select>
- <textarea>
- components
- v-bind適用范圍： 用于綁定屬性和數(shù)據(jù)
- 可以綁定class
- 可以綁定style
- 可以綁定value
...
三头岔、代碼示例
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>v-bind與v-model</title>
</head>
<body>
<div id="app" v-cloak>
<a >不使用v-bind 跳轉(zhuǎn)百度</a>
<br>
<a :href="website">使用v-bind 跳轉(zhuǎn)百度</a>
<br>
<input type="text" v-model="input_data">
<p>{{ input_data }}</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
website: 'https://www.baidu.com',
input_data: '123,456,789'
}
})
</script>
</body>
</html>
直接修改input_data
直接改變輸入值
代碼分析：
- 使用v-bind可以動(dòng)態(tài)的綁定屬性的值，其中website的改變僅來(lái)源于data里的website的變化鼠证，故數(shù)據(jù)時(shí)單向的
- 使用v-model峡竣，在輸入的時(shí)候，data里的input_data會(huì)發(fā)生變化量九，而當(dāng)直接修改input_data時(shí)适掰，input控件里的數(shù)據(jù)也會(huì)發(fā)生變化，所以v-model是雙向的荠列。
