vue.js 遍历数组,vue中遍历数组中的一个对象中的值

vue.js 遍历数组,vue中遍历数组中的一个对象中的值,Vue中遍历数组的新方法实例详解

这篇文章主要介绍了某视频剪辑软件中遍历数组的新方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

1、foreach

为每一个循环对不能使用返回来停止循环

搜索(关键字){

var newList=[]

this.urls.forEach(item={

if(item.name.indexOf(keyword)!=-1){

newList.push(项目)

}

})

返回新列表

}

2、filter

项目对象就是遍历数组中的一个元素,包括是es6中的新方法,在搜索方法中直接返回新数组

搜索(关键字){

return this.urls.filter(item={

如果(项。姓名。包含(关键字)){

退货项目

}

})

}

3、findIndex

返回真实的后指数就可以获取到匹配的元素在进行删除

del(row){

这个. $确认('确定要删除吗?', '删除').然后(动作={

var指数=这个。网址。查找索引(项目={

if(item.name==row.name){

返回真实的

}

})

this.urls.splice(索引,1)

});

4、some

如果匹配成功就返回真实的跳出一些的循环

del(row){

这个. $确认('确定要删除吗?', '删除').然后(动作={

this.urls.some((item,i)={

if(item.name==row.name){

this.urls.splice(i,1)

返回真实的

}

})

});

}

5、上例子,在一个某视频剪辑软件的数据中存入一个固定的数组,对数组进行遍历,实现搜索功能,删除功能

在埃尔表中:数据中绑定一个方法,方法中对固定的数组资源定位符进行遍历,返回一个新的数组实现搜索功能

模板

差异

label style=' float:left;'

搜索关键字:

输入类型=' text ' class=' form-control ' v-model=' keyword '

/标签

El-table:data=' search(keyword)' size=' small ':stripe=' true ':border=' true ' @ select=' select ' @ select-all=' select '

埃尔-表格-列类型='选择/El-表格-列

埃尔表列类型='索引/el表列

埃尔-表格-列标签='网站名prop='name' width='200 '

模板插槽-作用域='插槽'

一个href='槽。划。URL ' target=' _ blank"{ slot。划。name } }/a

/模板

/El-表格-列

埃尔-表格-列标签='网址prop=' URL '/El-表格-列

埃尔-表格-列标签='类型prop=' type ' width=' 50 '/El-表格-列

埃尔-表格-列标签='国家prop=' country ' width=' 50 '/El-表格-列

埃尔-表格-列标签='操作宽度='50 '

模板插槽-作用域='插槽'

El-button size=' mini ' type=' text ' icon=' El-icon-delete ' @ click=' del(slot。row)'/El-button

/模板

/El-表格-列

/el-table

埃尔分隔线内容-位置='左'表格操作/el-divider

El-button @ click=' batch delete ' type=' danger ' icon=' El-icon-delete ' size=' small '批量删除/el-button

/div

/模板

脚本

导出默认值{

data() {

返回{

关键词:'',

选择:[],

URL:[{

名称: '新浪,

网址:“http://www.sina.com”,

类型: '资讯,

'国家: '中国'

},

{

名称: '腾讯,

网址:“http://www.tencent.com”,

类型: '聊天,

'国家: '中国'

},

{

名称: '谷歌,

网址:“http://www.google.com”,

类型: '资讯,

'国家: '美国'

},

{

名称: '韬睿,

网址:“http://www.51i-star.com”,

类型: '教育,

'国家: '中国'

}

]

};

},

方法:{

del(row){

这个. $确认('确定要删除吗?', '删除').然后(动作={

/* this.urls.some((item,i)={

if(item.name==row.name){

this.urls.splice(i,1)

返回真实的

}

}) */

var指数=这个。网址。查找索引(项目={

if(item.name==row.name){

返回真实的

}

})

this.urls.splice(索引,1)

});

},

选择(选择,行){

this.selections=选择

},

batchDelete() {

这个. $确认('确定要删除吗?', '删除)。然后(动作={

for(var I=this。网址。长度-1;I=0;我- ) {

for(var j=this。选择。长度-1;j=0;j - ) {

if (this.urls[i].name==this.selections[j].名称){

this.urls.splice(i,1);

打破;

}

}

}

})。接住(错误={

警报(错误);

这个. $消息('删除取消');

});

},

搜索(关键字){

/* var newList=[]

this.urls.forEach(item={

if(item.name.indexOf(keyword)!=-1){

newList.push(项目)

}

})

返回新列表*/

return this.urls.filter(item={

如果(项。姓名。包含(关键字)){

退货项目

}

})

}

}

}

/脚本

风格

/风格

6、效果图为

总结

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

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: