vue中数组常用的6种循环方法代码示例
更新时间：2024年03月16日 14:24:29 作者：Maidangchen
在vue项目开发中,我们需要对数组进行处理等问题,这里简单记录遍历数组的几种方法,这篇文章主要给大家介绍了关于vue中数组常用的6种循环方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some()
一、for循环
let data = [{
name: '张三',
age: 10
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 30
}]
for (let i = 0; i < data.length; i++) {
console.log(data[i])
}二、map循环（会分配内存空间存储新数组并返回）
let data = [{
name: '张三'
}, {
name: '李四'
}, {
name: '王五'
}]
data.map((item, index) => {
console.log(item) //表示的是每一项
console.log(index) //表示的是数组的索引
})三、forEach
（①不会分配内存空间存储新数组并返回②允许callback更改原始数组的元素）
let data = [{
name: '张三'
}, {
name: '李四'
}, {
name: '王五'
}]
data.forEach((item, index) => {
console.log(item) //表示的是每一项
console.log(index) //表示的是数组的索引
})四、 filter
（过滤掉不满足条件的元素，把满足条件的元素返回一个新的数组，不会改变原来的数组）
let data = [{
name: '张三'
}, {
name: '李四'
}, {
name: '王五'
}]
let a = data.filter((item, index) => {
return item.name == '张三'
})
console.log(a)五、every
（遍历数组，当每一项都为true时返回true，否则为false）（遇到false停止执行，必须要有return值）
let data = [{
name: '张三',
age: 10
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 30
}]
let a = data.every((item, index) => {
return item.age > 20
})
console.log(a)//输出 false六、some
（遍历数组, 当有一项为真（true）时, 就会停止循环）
let data = [{
name: '张三',
age: 10
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 30
}]
let a = data.some((item, index) => {
return item.age > 20
})
console.log(a)//true附：vue循环数组改变点击文字的颜色
效果图 如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
list-style: none;
margin: 0;
padding: 0;
}
.red{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in username" @click="bution(index)" :class="index == colin?'red':''">{{index}}.{{item}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const obj = {
username:['张三','李四','王五','二麻子'],
colin:-1,
}
const app = new Vue({
el:'#app',
data:obj,
methods:{
bution:function(e){
this.colin = e
}
}
})
</script>
</body>
</html>总结
到此这篇关于vue中数组常用的6种循环方法的文章就介绍到这了,更多相关vue数组循环方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue-CLI项目中路由传参的方式详解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,在这里给大家分享vue中ref的用法,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了修改Vue项目运行的IP和端口的方法，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-02-02
这篇文章主要给大家分享的是 Vue中props用法介绍， 在Vue中通过props,可以将原本孤立的组件串联起来，也就是可以子组件可以接收父组件传递过来的data，下面我们一起进入文章看看内容的详细介绍吧,需要的朋友也可以参考一下2021-11-11
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
这篇文章主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了vue全局自定义指令和局部自定义指令的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要为大家详细介绍了Vue3自定义drag指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要为大家详细介绍了vue实现移动端图片裁剪上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了vue+express生成token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最近需要有个拖拽列表的需求，发现一个简单好用的 Vue 可拖拽组件，本文主要介绍了可拖拽组件Vue Smooth DnD的使用，感兴趣的可以了解一下2021-07-07
最新评论