v-model指令的学习

v-model的原理

v-model="message"   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
就相当于先用一个v-bind绑定一个值　　v-bind:value="message"

再用v-on绑定一个事件 　　@input=“message=$event.target.value”

 

v-model绑定radio

v-model绑定 checkbox 单选框或者多选框

 

 绑定多选框可以直接声明一个数组变量  例如 hobbies:[]

在多选框标签绑定一个v-model="hobbies"

在选择后 他会自动将选择的值加入进hobbies数组中

 
v-model的修饰符

.lazy　　就是在用户输入时数据不会进行传输，在失去焦点后或者按回车，才会将数据将进行改变

.number　　因为v-model所绑定的数据，都会默认转换为string类型，而.number就能将数据转换为number类型

.trim　　去除用户输入的左右两边的空格