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

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

 

 

技术
©2019-2020 Toolsou All rights reserved,
vue的v-if与v-show的区别C语言控制台小游戏,打砖块用C++跟你聊聊“原型模式” (复制/拷贝构造函数)身价530亿美元!世界首富前妻再嫁化学老师:承诺捐赠一半财富关于过年ESP8266/ESP32 系统篇: 优化系统启动时间java简单的抽奖算法,抽奖Demo比特币站上5.2万美元 美团CEO王兴:理论上中本聪已经是世界首富了连 CEO 都不香了?这些互联网大佬接连辞任比尔·盖茨:疫情后彻底恢复正常可能要到2022年末