首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue数组循环方法

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

2024-03-16 14:18:53 作者：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数组循环方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！