vue.js 重学笔记(6) push pop unshift shift splice sort reverss数组变异方法

最新推荐文章于 2025-05-09 12:35:45 发布

前端一号站

最新推荐文章于 2025-05-09 12:35:45 发布

阅读量540

点赞数

分类专栏： vue快速入门与提高文章标签： vue vue.js push sort reverve

本文链接：https://blog.youkuaiyun.com/weixin_39553363/article/details/109154193

版权

vue快速入门与提高专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了在Vue.js中能够使数组在视图中完成更新操作的有效方法，包括push、pop、unshift、shift、splice、sort及reverse等，并提供了具体的使用案例。

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

学习编程的唯一方法就是编写大量的代码。
---- 点赞是动力，关注是支持----

在javascript中，有很多个对数组进行操作的方法，但是，在vue.js中，只有一部分的方法才有效，这些方法，这些能够让数组在视图中完成更新操作的方法我们可以暂且把他们称作为 数组的变异方法

数组

<div id="app">         
		     {{arr}}     
</div>
 <script type="text/javascript">
	      let vm=new Vue({
			  el:'#app',	
			 data:{	   
                arr:[1,2,3]
			 },
			
		  });
	
	    //此处操作	  
		.....

	   </script>

`1.push(参数)`

作用：在数组后面增加一项
返回值：新数组的长度

例子：

vm.arr.push(5)

输出：

4

页面效果

[ 2, 3 ]

`2.pop()`

作用：删除数组的最后一项
返回值：数值，删除第几个成员

例子：

vm.arr.pop()

输出：

3

页面效果

[ 1, 2 ]

`3.unshift(参数)`

作用：在数组前面增加一项
返回值：新数组的长度

例子：

vm.arr.unshift(9)

输出：

4

页面效果

[9，1，2，3 ]

`4. shift()`

作用：删除数组的第一项
返回值：数值，删除第几个成员

例子：

vm.arr.shift()

输出：

1

页面效果

[2,3 ]

`5. splice(a,b)`

作用：从第n个数开始，删掉b个数字。
返回值：被删除掉的数值

例子：

vm.arr.splice(2，1)

输出：

3

页面效果

[1,2 ]

`6. sort`

作用：打乱数组
返回值：新的数组

例子：

vm.arr.sort((a,b)=>{return Math.random()-0.5})

输出：

[3, 1, 2, ob: Observer]

页面效果

[3, 1, 2 ]

`7.revers()`

作用：倒序
返回值：新的数组

例子：

vm.arr.reverse()

输出：

[3, 2, 1, ob: Observer]

页面效果

[3, 1, 2 ]

注意：不能让数组在视图中更新的操作

修改数组的索引 (vm.arr[0]=‘new’)
修改数组的长度(vm.arr.length=6)

扩展

能够让对象修改在视图中更新

对象属性的修改

不能够让对象修改在视图中更新

增加对象属性
删除对象属性