vue常用高阶函数及综合实例

1、vue常用高阶函数及综合实例-.常用的数组的高阶函数假设,现在有-个数组,我们要对数组做如下-些列操作1.找出小于1的数字将小于1的数字全部乘以在的基础上对所有数求和通常我们会怎么做呢?tltileheadetrettitleTitleivi找出小于1的数字将小于100的数字,全部乘以对所有数求和uttg计算uuttivritr.vue.scriptteueeltu11u1uuethgetNum()找1.出10的0数字letewNum1=for(letnumoftif(num100newNum1.pusum1=newNum1ole.log(newNum1对小于1的数字leteufrletufe

2、u1eu.uuti.ueule.leu对小于1的数字后求和leteufrletufeueuuti.ueule.leu在上面的e中我们全部都是使用循环来进行计算并且最后达到了我们想要的效果.点击计算按钮查看计算结果折出小于10(鵬字:10地30局80剛田OOfiS?,20,40360,110,160在高阶函数里面有一些高阶函数是可以:直接计算得到上面的效果的:下面9要介绍三个高阶函数回调函数中有retur返回值，若返回值为true这个元素保存到新数组中；若返回值为fl，则该元素不保存到新数组中；原数组不发语法rr.filterfutiurretlueierrtilue参数举例举例2利用接收的回2

3、de函;unctunct210,2elemen,320dex,seetNums()来看看的用eeumreurum332ums.filter(element)=letnums=10,letnewNum2=threturnself.inde运行结果332去除重复元素依靠的是de总是返回第一个元素的位置，后续的重复元素位置与de返回的位置不相等，因此被滤掉了r。2.map函数方法返回一个新数组，新数组中的每一个元素为原始数组对应每一个元素调用函数处理后的值；不会对空数组进行编辑，不改变原来的数组。语法arra参数:举例letnums=letnewNum1returnnum*2输出结果3.reduce

4、函数reduce方法接语法参数.eeremdex,arraunctio)t参数描述functioiXcurrentValu,indeairr)必填口因数.数组中的每亍元素都会执行这个雷数参数描述previousValue上一次凋用回调函数的返回值或者是提供的初始化rentVolue胁填，当前元素index可选，当前兀素的索引僖arr切选.当前兀素属于的数组对象thisValue作为第一次调用callback的第一个参数案例1求一个数组的和的用法12121.21221综合案例1结合三个函数获取数组中1的元素然后对这些元素同意最后求后的所有元素的和的用法121221221.11输出结果122其实还

5、有更简单的算法表达式的用法122111.11执行结果1综合案例2显示一个列表选中那个那个变色使用实现0-java1php2python可以思考两分钟看看如何来设计.在中这个过程将非常简单3-go第一步定义了一个用来记录当前选中元素的下标.第二步在属性中设置表示选中元素的下标显示红色其他不显示第三步定义一个事件每次点击事件修改选中的下标值老红色其他不显示红色亠代码如下所示tvaraueneel:#app,data:languages:javaisCurrentIndex:0hods：angeCurrentIndex(index)is.isCurrentIndex=inde四.综合案例3我们要做一

6、个表格具体内容如下tt主要有哪些东西呢弋码如何实现,了n本书，放在vue的语言实战vu点浅实ue有n本书，书有书名，出版戸期,价格，价格保留两位小数，数量可增减,最多减至I3.操作可以删随时计算总价格.下面来看看这个第一步：定义data：boonamnamnamnamtotal：ee：ee：i除表格当表格没有数据时显示干数据1998-10-212018-5-12tt定义了一个总价格用来保存计算后的总价格第二步：画tabletableborder=theadtd序号tdtd书名tdTOC o 1-5 h ztd出版日期tdtd价格tdtd购买数量tdtd操作td/theadtbdvb.lentt

7、rtdlan没有数据td/tr/tbodytttrv-for=(ite，ndenbndex+1/tdtem.publishDate/tdtem.priceiceUnitbuttonclick=sub(indexitem.countbuttonclick=add(index/tbody/tablelabelid=总价：etTotaltbdvele/tdbuttonbuttonlabeltt在这里我们循环遍历了data数据,然后对价格进行了处理，增加了单位,对数量增加了增减的buttn最后定义了一个删除功能第三步.使用过滤器格式化价格.增加了一个美元符号，价格保留两位小数在对价格进

8、行格式化的时，候使用了管道符.这是过滤器的写法.不加过滤器之前，价格是58加.了过滤器之后是：t因为不止有一个地方会用到加单位所以，我们将其定义为一个方法如下写法e)ce.toFixedilters:riceUeturn这里定义了过滤器的写法类似于methods里面定义一个方法其实这个方法可不可以放在methods中呢也可以，但是放在有b个好处可以使用管道符写法tdtemeettd使用过滤器，会自动将前面的值作为参数传递给et第四步：定义methods对图书数量进行增减，且做少不能少于0subndex(this.booksideot0ths.booksindex.coun=0;elseths.booksindexotadd(dexthsooksindexot这个就不多说了,普通函数写法第五步：计算总额计算总额有多种写,法常规写法etTotal()ettotalPrice=0;or(leti=0;ithis.books.lengthtote+=this.bookse*this.bookstteturntot循环遍历oo价格和数量乘积的和推荐使用的高阶函数etot使用数组的高阶函数计算每种书的价格总和etthsoosmooooeooeduce(totmtot在回顾一下m是对数组的每一个元素执