简单来说,区别如下:
1.v-bind用来绑定数据和属性以及表达式,缩写为’:’
2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用
V-model
v-model多在表单中使用,在表单元素上创建双向绑定,根据控件类型选择正确的方法更新元素,可以绑定text、radio、checkbox、selected
绑定text
<input type="text" v-model="val" />
<p> {{val}} </p>
绑定radio
<input type="radio" value="one" v-model="radioVal" />
<input type="radio" value="two" v-model="radioVal" />
<label for v-bind="radioval" />
绑定checkBox
单个勾选框,最终的值为逻辑值true和false
<input type="checkbox" v-model="checkVal"/>
<label for="checkbox">{{checkVal}}</label>
多个勾选框时,将值绑定到一个数组
<input type="checkbox" value="apple" v-model="checkArray"/>
<label for="checkbox">{{apple}}</label>
<input type="checkbox" value="banana" v-model="checkArray"/>
<label for="checkbox">{{banana}}</label>
<input type="checkbox" value="pear" v-model="checkArray"/>
<label for="checkbox">{{pear}}</label>
<span>{{checkArray | json}}</span>
checkArray中的值会根据是否选中进行关联变化
增加参数
1)lazy
将输入框的input事件改为change事件,使得输入框在change事件中更新而不是input
关于change事件和input事件的区别,简单说来是:
change事件必须是在输入框失去焦点之后才会触发,而input事件可以实时监测。
(2)number
将文本框输入的值都变为数字,如果是变为数字之后是NAN,则返回原始值
(3)trim
取出输入的字符串的首尾空格
v-bind
绑定文字
<p v-bind="message"></p> <p>{{message}}</p>
绑定属性
<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>
绑定表达式