第四章Vue学习-数组操作的高阶函数

最新推荐文章于 2023-12-01 11:59:28 发布

玲宝12138

最新推荐文章于 2023-12-01 11:59:28 发布

阅读量130

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://www.bilibili.com/video/BV15741177Eh?p=51&spm_id_from=pageDriver

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue学习第四章-数组操作的高阶函数

一、高阶函数

编程范式：命令式编程/声明式编程

**编程范式：面向对象编程|函数式编程

以前的方案

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R4uOnErB-1627007491643)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723082921958.png)]$

1、高阶函数-filter函数（全体过滤）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ep8Mz1dj-1627007491646)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723083634520.png)]$

2、高阶函数-map函数（全体操作）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-envSlNlK-1627007491649)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723084226370.png)]$

3、高阶函数-reduce函数（迭代）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JwTttHlI-1627007491650)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723085420878.png)]$

4、高阶函数结合

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0yvHEne-1627007491651)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723085720671.png)]$

5、简写

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Keds1ajB-1627007491653)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723085850832.png)]$

二、表单绑定v-model

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFU3GVvQ-1627007491654)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723080928878.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xhzanlky-1627007491654)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723093939830.png)]$

1、v-model结合radio类型

有了v-model，可以不需要用name来区分是同一个sex类型

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4bFwGEY3-1627007491655)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723095452483.png)]$

2、v-model结合checkbox类型

label 里添加一个for ，就可以不需要点击input才能选中了，点击“同意协议”一样可以选中

单选框

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eIl5Xtt4-1627007491656)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723095943439.png)]$

多选框

点击会自动加入到数组中去

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hquDRsNG-1627007491656)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723100601946.png)]$

3、v-model结合select类型

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0osMitmK-1627007491657)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210723100959439.png)]$