vue 创建数组 根据索引_【VUE】数组

本文介绍了Vue.js中数组的常见操作,包括变异方法如push、pop、unshift、shift、splice、sort和reverse,以及替换数组的方法如filter、concat和slice。特别强调了在Vue中如何正确修改数组以实现响应式更新,如使用Vue.set、$set或splice。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【VUE】常用函数

目录

==================================================

1、变异方法

2、替换数组

3、修改数组

==================================================

1、变异方法

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

this.items.push({msg:'n1'})this.items.push({msg:'n1'},{msg:'n2'})

pop() 方法用于删除并返回数组的最后一个元素。

this.items.pop()

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

this.items.unshift({msg:'n1'})this.items.unshift({msg:'n1'},{msg:'n2'})

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

this.items.shift()

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

splice(length) 设置长度

splice(index, len, [item])

添加,在索引1的位置this.items.splice(1,0,{msg:'n1'})this.items.splice(1,0,{msg:'n1'},{msg:'n2'})

删除,从索引1开始,删除2个含索引this.items.splice(1,2)

替换,从索引1开始,替换1个含索引this.items.splice(1,1,{msg:'n'})this.items.splice(1,2,{msg:'n'}) 替换2个

sort() 方法用于对数组的元素进行排序。按照字符编码默认从小到大排序

默认字母排序

this.items.sort()

reverse() 方法用于颠倒数组中元素的顺序。

this.items.reverse()

1、替换数组

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

this.items.filter(function(item) {return item.message.match(/Foo/)

})

concat() 方法用于连接两个或多个数组。

this.items.concat([{message:'JJ'},{message:'BB'}])

slice() 方法可从已有的数组中返回选定的元素。

this.items.slice(开始索引, 结束索引) 结束索引不包含this.items.slice(开始索引) 从开始到结尾

索引为负数时,数组长度加上负数索引就是使用的索引

3、修改数组

this.items[1] = { message: 'Bar m'} 修改不响应

解决方式,一下三种都可以

Vue.set(this.items, 1, { message: 'Bar11'})

vm.$set(this.items, 1, { message: 'Bar22'})this.items.splice(1, 1, { message: 'Bar33' })

this.items.length = 2修改不响应

解决方式this.items.splice(2)

其他

split() 方法用于把一个字符串分割成字符串数组

Vue.js 是一个流行的前端JavaScript框架,它允许开发者创建响应式的用户界面。在Vue创建数组通常遵循JavaScript的数组创建方式,但需要注意,Vue提供了一些特殊的方法来处理数组,以确保在数组更新后,视图能够正确响应变化。以下是创建数组的几种方式: 1. 直接初始化:你可以直接使用数组字面量的方式创建一个新的数组。 ```javascript let newArray = []; ``` 2. 使用构造函数:Vue推荐使用`Array`构造函数来创建数组,这样Vue能够检测到数组的变化并更新视图。 ```javascript let newArray = new Array(); ``` 3. 使用Vue.set(针对对象属性)或Vue.delete(针对对象或数组元素):当需要添加或删除数组元素,并希望触发视图更新时,应该使用这些方法。 ```javascript // 添加元素 Vue.set(this.$data.array, index, value); this.$data.array.splice(index, 0, value); // 删除元素 Vue.delete(this.$data.array, index); this.$data.array.splice(index, 1); ``` 4. 使用Vue的响应式方法:在Vue实例的data选项中定义数组Vue会自动将这些数组变为响应式的。 ```javascript var vm = new Vue({ el: '#app', data: { items: [] } }); ``` 5. 使用ES6语法创建数组Vue也支持使用ES6的新特性,如扩展运算符(...),来创建数组。 ```javascript let newArray = [...existingArray]; ``` 在处理Vue中的数组时,需要注意的是,直接通过索引设置一个项或者修改数组的长度可能不会触发更新。在这种情况下,应该使用Vue提供的特殊方法,如`Vue.set`、`Vue.delete`或者使用数组的变异方法(如`push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `reverse`)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值