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

   日期:2020-05-25     浏览:206    评论:0    
核心提示:一、哪些函数是响应式的:1.push 在后面追加数据5.sort() 排序6.reverse() 顺序翻转 abcd ----> dcba红框中的方式修改数组中的数据时,界面没有响应式的效果二、高阶函数:对数组的操作1、filter函数,返回布尔值返回值是true,则返回当前的值;如果返回值是false,则不返回当前值。循环判断数据里面的数据,直到完成;2、map函数,对数组里面的值进行处理后,返回相应的值。循环判断数据里面的数据,直到完成。3、r.javascript

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

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

 

 

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
更多>相关资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服