Vue学习笔记之函数、高阶函数、v-model的应用

一、哪些函数是响应式的：

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：可以过滤字符串中首尾两边的空格。