vue的命令的使用(二)

95 阅读1分钟

v-model

v-model 现在只能用在表单标签

v-model的作用是 把vue的数据变量和表单的value属性双向绑定在一起

语法:v-model="Vue数据变量"

image.png

1 输入框的使用 v-model写在input里面,并且要在data里面声明

2 下拉菜单的使用 v-model写在select里,要记得声明,而且给select下的option的value填上和写的值一样的值

3 复选框的使用,v-model写在checkbox里,value值也要和写入的值一样,唯一不同的是data里声明的不再是''空字符串,而是[]空数组,(非数组 – 关联的是checked属性数组数组– 关联的是value属性)

4 单选框的使用 ,v-model写在radio里,value值也要和写入的值一样,在data声明

5 输入域的使用 v-model写在textarea里,记得在data声明

v-model的修饰符

1 .number--转换成数字类型给vue数据变量

2 .trim--除去两边空格值

3 .lazy--失焦的时候才触发方法

image.png

v-for

语法:v-for='值变量 in 目标结构'

语法:v-for='(值变量,索引变量) in 目标结构'

image.png