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指令，Vue官网一共有提供了14个指令，下面我们就来详细讲解每一个指令的详细内容,需要的朋友可以参考一下2021-10-10
今天小编就为大家分享一篇vue 导航内容设置选中状态样式的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了Vue数据双向绑定底层实现原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
vuex通过getters访问数据为undefined问题及解决
这篇文章主要介绍了vuex通过getters访问数据为undefined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
使用WebStorm导入已有Vue项目并运行的详细步骤与注意事项
这篇文章主要介绍了如何使用WebStorm导入、运行和管理Vue项目,包括环境配置、Node.js和npm版本管理、项目依赖管理以及常见问题的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-11-11
vue3如何定义变量及ref、reactive、toRefs特性说明
这篇文章主要介绍了vue3如何定义变量及ref、reactive、toRefs特性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
对数字进行千分位分隔后展示应该是大部分同学都做过的功能了吧,常规的做法通常是编写一个工具函数来对数据进行转换,那么我们可不可以通过vue指令来实现这一功能呢,下面我们就来探索一下呢2024-02-02
这篇文章主要介绍了vue项目如何部署运行到tomcat上的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue实现路由切换改变title功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
最新评论