V-bind和V-model的区别

383 阅读1分钟

简单来说,区别如下:
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>

绑定表达式