vue中数组常用的六种循环方法

简单记录一下,常用的六种数组循环的方法,分别是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

  • 0
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue.js 提供了很多方便的指令来循环数组,以下是几种常见的方式: 1. 使用`v-for`指令 `v-for`指令是Vue.js常用的指令之一,它可以用来循环数组、对象或数字。对于数组循环,可以这样写: ``` <div v-for="(item, index) in items" :key="index">{{ item }}</div> ``` 其,`items`是要循环数组,`item`是当前循环的元素,`index`是当前循环的索引。注意要为每个循环的元素设置一个唯一的`key`属性。 2. 使用`v-bind`指令 `v-bind`指令可以用来绑定DOM元素的属性,例如`class`、`style`等。对于数组循环,可以这样写: ``` <div v-bind:class="{ active: item.isActive }" v-for="(item, index) in items" :key="index">{{ item }}</div> ``` 其,`item.isActive`是一个布尔值,如果为`true`,则给当前循环的元素添加一个`active`类。 3. 使用`v-model`指令 `v-model`指令可以用来实现双向数据绑定,对于数组循环,可以这样写: ``` <div v-for="(item, index) in items" :key="index"> <input type="text" v-model="items[index]"> </div> ``` 其,`v-model`指令将输入框的值与数组对应索引的元素进行双向绑定。 4. 使用`computed`属性 如果需要对数组进行一些计算,例如过滤、排序等,可以使用`computed`属性来处理。例如: ``` computed: { filteredItems: function() { return this.items.filter(function(item) { return item.isActive; }); } } ``` 其,`filteredItems`是一个计算属性,它返回一个过滤后的数组。 以上是几种常见的循环数组的方式,根据不同的需求选择合适的方式可以使代码更加简洁、易读。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值