一、哪些函数是响应式的:
1.push 在后面追加数据
5.sort() 排序
6.reverse() 顺序翻转 abcd ----> dcba
红框中的方式修改数组中的数据时,界面没有响应式的效果
二、高阶函数:对数组的操作
1、filter函数,返回布尔值
返回值是true,则返回当前的值;如果返回值是false,则不返回当前值。循环判断数据里面的数据,直到完成;
2、map函数,对数组里面的值进行处理后,返回相应的值。循环判断数据里面的数据,直到完成。
3、reduce函数,可以理解为“合计”的一个动作
高阶函数的联合使用:
更简洁的写法:
实例:
三、v-model的用法:
1、data里面的message字段绑定到input的控件中,改变控件或者改变data里面message的值,都会相应变化,双向绑定。
修改message值:
修改控件值:
原理:
v-model与单项控件的使用:
PS:input里面的name属性,是在做表单的时候,相同名字的,则只能选择一个;但有v-model后,可以将name的属性去掉,效果也一样。
v-model跟单、多选框的使用:单选框对应布尔值,多选框对应数组
其中:label的作用是点击“同意协议”的文字也可以进行选择
v-model与select的应用:
单选:注意v-model的位置
多选:返回值是数组,同时需增加multiple的属性,界面上按shift、Ctrl键进行多选
值绑定:界面数据从后台获取,再将相关数据渲染到界面上,不再是界面上直接写死选项
注意循环时id要进行动态绑定v-bind!
v-model的修饰符
lazy:当回车或数据在失去焦点是才会更新内容;
number:可以让在输入框中输入的内容自动转换成数字类型;
trim:可以过滤字符串中首尾两边的空格。