1. v-bind:单向绑定
1.1作用:
使视图层可以使用逻辑层data的数据,从而达到动态改变视图层的效果。
简单来说就是由data中的数据决定视图层的效果。
1.2用法:
在html属性或样式(行内)前加上 v-bind:或:
1.3注意
v-bind只可以单向的由数据来决定视图,无法反其道而行。
数据 -> 视图 ;√
视图 -> 数据 ;×
2. v-model : 双向绑定
2.1作用
v-model实现了双向绑定,视图与数据相互作用。
2.2用法
在html属性或样式(行内)前加上 v-model:
v-model 是由 v-bind 与 v-on 结合才得以实现。如下:
<input v-bind:value = "msg" v-on:input="msg = $event.target.value" />
//上面也等于下面
<input v-model:value = "msg" />
3. v-model 事件修饰符
1. .number // 将v-model 得值 转为 number 类型
2. .trim // 去除空隔
3. .lazy // 失焦时才改变 data 数值