一、v-bind是单向数据绑定, 而v-model是双向数据绑定
v-bind是单向绑定，如果配合事件，也可以实现双向数据绑定
二、适用的控件不同
- v-model适用范围： 表单控件或者自定义组件
- <input>
- <select>
- <textarea>
- components
- v-bind适用范围： 用于绑定属性和数据
- 可以绑定class
- 可以绑定style
- 可以绑定value
...
三、代码示例
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>v-bind与v-model</title>
</head>
<body>
<div id="app" v-cloak>
<a href="https://www.baidu.com">不使用v-bind 跳转百度</a>
<br>
<a :href="website">使用v-bind 跳转百度</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可以动态的绑定属性的值，其中website的改变仅来源于data里的website的变化，故数据时单向的
- 使用v-model，在输入的时候，data里的input_data会发生变化，而当直接修改input_data时，input控件里的数据也会发生变化，所以v-model是双向的。
网友评论