宝哥软件园

Vue中遍历数组的新方法的详细说明

编辑:宝哥软件园 来源:互联网 时间:2021-08-21

1、foreach

Foreach循环对不能使用return来停止循环

search(关键字){ var newList=[]this . URLs . foreach(item={ if(item . name . indexof(关键字)!=-1){ newList.push(item) } })返回newList }2、筛选器

Item对象是遍历数组中的一个元素,includes是es6中的一个新方法,它在search方法中直接返回一个新数组

search(关键字){ return this . URLs . filter(item={ if(item . name . includes(关键字)){ return item } }) } 3、findIndex

返回true后,index可以获取匹配的元素并将其删除

德尔(排){这个。$confirm('您确定要删除它吗?'、“删除”)。然后(动作={var index=this。URLs.findindex (item={if (item。name==row。name){ return true;} }) this.urls.splice(index,1)});4、一些

如果匹配成功,返回true跳出一些循环

德尔(排){这个。$confirm('您确定要删除它吗?'、“删除”)。然后(动作={this。URLs.some ((item,I)={if (item。name==row。名称){这个。URL . split(I,1)返回true} }) });}5.在上面的例子中,一个固定的数组存储在vue的数据中,并且遍历该数组以实现搜索功能和删除功能

将一个方法绑定到el-table中的:data,遍历固定数组URL,返回一个新数组,实现搜索功能

模板差异标签样式='左浮动:'搜索关键字:输入类型=' text ' class=' form-control ' v-model='关键字'/label El El-table : data=' search(关键字)' size=' small ' : strip=' true ' : border=' true ' @ select=' select ' @ select-all=' select ' El-table-column type=' selection '/El-table-column type=' index '/El-table-column El-table-column label='网站名prop=' name ' width=' 200 '模板slot-scope=' slot ' a href=' slot。划船。URL ' target=' _ blank ' { slot。划船。名称} }/a/模板/El-表-列El-表-列标签='网址道具=' URL '/El-表格-列El-表格-列标签='类型prop=' type ' width=' 50 '/El-table-column El-table-column标签='国家道具='国家'宽度=' 50 '/El-表-列El-表-列标签='操作宽度='50 '模板slot-scope=' slot ' El-button size=' mini ' type=' text ' icon=' El-icon-delete ' @ click=' del(slot。行)'/El-按钮/模板/El-表格-列/El-表格El-分隔线内容-位置='左侧'表格操作/El-divider El-button @ click=' batchDelete ' type=' danger ' icon=' El-icon-delete ' size=' small '批量删除/el按钮/div/templatescript导出默认{ data(){ return { key word : },selections: [],URLs :[{ name : }新浪,url: 'http://www.sina.com',type: '资讯,country: '中国},{ name : }腾讯,url: 'http://www.tencent.com ',type: '聊天,country: '中国},{ name: '谷歌,url: 'http://www.google.com ',type: '资讯,country: '美国},{ name: '韬睿,url: 'http://www.51i-star.com ',type: '教育,country: '中国' } ] };},methods: { del(row){ this .$confirm('确定要删除吗?', '删除').然后(操作={ /* this.urls.some((item,I)={ if(item。name==row。名称){这个。网址。拼接(一,一)返回true} })*/var index=this。网址。查找索引(项={ if(项。name==row。name){ return true;} }) this.urls.splice(index,1)});},选择(选择,行){ this。选择=选择;},batchDelete() { this .$confirm('确定要删除吗?', '删除') .然后(action={ for(var I=this。网址。长度-1;I=0;I-){ for(var j=this。选择。长度-1;j=0;j-){ if(这个。网址.name==this.selections[j].name) { this.urls.splice(i,1);打破;} } } }) .捕捉(错误={ alert(错误));这个$message('删除取消');});},搜索(关键字){/* var newList=[]this。网址。foreach(item={ if(item。名字。indexof(关键字)!=-1){ NewList。push(item)})return NEwList */return this。网址。过滤器(项目={ if(项目。名字。包括(关键字)){返回项} })} } }/脚本样式/样式6、效果图为

总结

以上所述是小编给大家介绍的某视频剪辑软件中遍历数组的新方法实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

更多资讯
游戏推荐
更多+