Vue的数组中哪些方法是响应式的

最新推荐文章于 2022-01-18 18:36:23 发布

朱振玉小迷弟

最新推荐文章于 2022-01-18 18:36:23 发布

阅读量181

点赞数 1

分类专栏： Vue学习笔记（带源码）文章标签： vue javascript css vue.js html5

本文链接：https://blog.csdn.net/weixin_50357864/article/details/115267224

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>用户登录切换小案例</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in letters">
					{{index+1}}.{{item}}
				</li>
			</ul>
			<button @click="btnClick()">按钮</button>
		</div>
		<script src="./js/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					letters:['猴哥','八戒','沙僧','唐僧']
				},
				methods:{
					btnClick(){
						this.letters.push('白龙马')
					}
				}
			})
		</script>
		
	</body>
</html>

二、push方法

在数组最后面添加一个或多个元素。
语法：

this.letters.push('aaa')

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>用户登录切换小案例</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in letters">
					{{index+1}}.{{item}}
				</li>
			</ul>
			<button @click="btnClick()">按钮</button>
		</div>
		<script src="./js/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					letters:['猴哥','八戒','沙僧','唐僧']
				},
				methods:{
					btnClick(){
						this.letters.push('aaa')
					}
				}
			})
		</script>	
	</body>
</html>

三、pop()方法

删除数组中的最后一个元素，注意pop后面的小括号不可以省略！！！
语法：

this.letters.pop();

四、shift()

删除数组中的第一个元素
语法：

this.letters.shift();

五、unshift()

在数组最前面添加元素
语法：

this.letters.unshift()
this.letters.unshift('aaa','bbb','ccc')

六、splice

splice的作用有三种：删除元素，替换元素，插入元素。
其实语法很简单很容易记忆：
删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）

this.letters.splice(1,3)

替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素

this.letters.splice(1,3,'白龙马','黑龙马','绿龙马')

插入元素：第二个参数，传入0，并且后面跟上要插入的元素

this.letters.splice(1,3,'白龙马','黑龙马','绿龙马')

上述三个例子中第一个参数（也就是1），代表的是从第二个元素（计算机从0开始计数）后面开始执行命令。

七、sort()

作用：排序
语法：

this.letters.sort()

八、reverse()

作用：实现数据反转。
顾名思义，原本顺序为abcd的四个元素，触发reverse()方法后，会变成dcba
语法：

this,letters.reverse()

九、set方法

在Vue中，如果直接利用数组索引值来修改元素的方法不是响应式的，故Vue中有一相同效果的方法——set。
语法：

Vue.set(this.letters,0,'bbbbb')
// set(要修改的对象,索引值,修改后的值)

朱振玉小迷弟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue的数组中哪些方法是响应式的

一、源码<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>用户登录切换小案例</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in letters"> {{index+1}}.{
复制链接

扫一扫