一、v-model与v-bind区别
v-bind
是单向绑定
,用来绑定数据和属性以及表达式,只能将vue
中的数据同步到页面。v-model
是双向绑定
,不只能将vue
中的数据同步到页面,而且可以将用户数据的数据赋值给vue
中的属性。v-bind
可以给任何属性赋值
;v-model
只能给具备value属性
的元素进行数据双向绑定
。
二、v-model
v-model多在表单中使用,在表单元素上创建双向绑定,根据控件类型选择正确的方法更新元素,可以绑定text、radio、checkbox、selected
三、v-bind
- 绑定文本:直接用
v-bind
或者{ {}}
<p v-bind="mgs"></p> <p>{ { mgs }}</p>
- 绑定属性
<img v-bind:src="'//www.baidu.com/img/flexible/logo/pc/result.png'" /> <div v-bind:class="'className'">class</div> <div v-bind:style="{color: 'red'}">class</div> <p>---------------------------------------------</p> <img :src="'//www.baidu.com/img/flexible/logo/pc/result.png'" /> <div :class="'className'">class</div> <div :style="{color: 'red'}">class</div>
- 绑定表达式
{ { number + 1 }} { { isTrue ? 'a' : 'b' }} { { msg.split('').reverse().join('') }}
- 绑定
html
:这个时候必须要使用三个{}
{ { {'<div style="color: red;">test</div>'}}}
v-bind
可以同时绑定多个属性<CT v-bind="bindmodal"></CT> <CT v-bind:a="bindmodal.a"></CT> <CT :a="bindmodal.a" :b="bindmodal.b"></CT>