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、效果图为

总结

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

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