vue中数组常用的6种循环方法代码示例

更新时间：2024年03月16日 14:24:29 作者：Maidangchen

在vue项目开发中,我们需要对数组进行处理等问题,这里简单记录遍历数组的几种方法,这篇文章主要给大家介绍了关于vue中数组常用的6种循环方法,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、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数组循环方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于Vuex无法观察到值变化的解决方法
下面小编就为大家分享一篇基于Vuex无法观察到值变化的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue3输入单号和张数如何自动生成连号的单号
最近遇到这样的需求输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号,本文重点介绍vue3输入单号和张数,自动生成连号的单号,感兴趣的朋友一起看看吧
2024-02-02
Vue项目中token验证登录(前端部分)
这篇文章主要为大家详细介绍了Vue项目中token验证登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue注册组件的几种方式总结
下面小编就为大家分享一篇vue注册组件的几种方式总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue如何实现自定义步骤条
这篇文章主要介绍了vue如何实现自定义步骤条问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Vue3使用setup如何定义组件的name属性详解
vue3中新增了setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题,下面这篇文章主要给大家介绍了关于Vue3使用setup如何定义组件的name属性的相关资料,需要的朋友可以参考下
2022-06-06
vue3中使用keepAlive缓存路由组件不生效的问题解决
这篇文章主要介绍了vue3中使用keepAlive缓存路由组件不生效的问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-06-06
vue组件的写法汇总
组件化是为了方便代码复用，提高开发效率。今天脚本之家小编给大家分享常见的vue组件写法四种，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-04-04
Vue3在history模式下如何通过vite打包部署白屏
这篇文章主要介绍了Vue3在history模式下如何通过vite打包部署白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue中modal传输数据并刷新部分页面数据方式
这篇文章主要介绍了vue中modal传输数据并刷新部分页面数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04