Vue_ElementUI之8_数组更新检测

最新推荐文章于 2024-06-13 08:00:00 发布

RobotB

最新推荐文章于 2024-06-13 08:00:00 发布

阅读量264

点赞数 1

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/m0_47572402/article/details/114297328

版权

Web前端专栏收录该内容

8 篇文章

订阅专栏

本文适用于Web入门级或偏中级前端爱好者等，内容是作者在51CTO的学习笔记，提交于github，有时候也没时间更新优快云，github对于部分同学可能也有一定的难度，本着开源的精神，较入门偏引导的小篇幅学习资料进行分享，希望对大家有帮助，也感谢大家的三联，我们走起！学到知识就好哦！知识版权申明，本知识体系是51CTO某位老师的课程，鉴于老师已在51CTO取得收益，故我不再进行版权申明和导流并作为知识技能分享，也希望老师看到能理解。

8_数组更新检测

8_1数组更新检测方法一：Vue静态方法

Vue.set()
vm对象.$set()

8_2数组更新检测方法二：数组变异方法

添加删除元素push()、pop()、shift()、unshift()
数组元素排序sort()、reverse()
更广义地添加/删除splice()
- array.splice(删除位置下标，删除元素个数)
- array.splice(添加位置下标，0，待添加元素)
slice()获取值

8_3示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8_数组更新检测</title>
</head>
<body>

<!--DOM-->
<div id="app">
<h4>Test</h4>
<ul>
	<li v-for="(e,index) in goodsLists">{{index+1}}---{{e}}</li>
</ul>
<!--
vm.goodsLists.push('t1');#在数组尾部添加元素
vm.goodsLists.push('t1');#在数组尾部删除元素
vm.goodsLists.unshift('t1');#在数组首部添加元素
vm.goodsLists.shift('t1');#在数组首部删除元素
vm.users.sort(function(a,b){return a.age-b.age});#从小到大排序
vm.users.splice(1,0,{name:'xii',age:99});#添加元素
vm.users.splice(1,1);#删除元素
vm.users.slice(1,2);#删除元素
-->
<div>
	<ul>
		<li v-for="(item,id) in users">{{id+1}}---{{item.name}}---{{item.age}}</li>
	</ul>
</div>
</div>

<!--引入vue-->
<script src="../js/vue.js"></script>

<!--javascript-->
<script>
<!--vue&javascript-->
	var data={
	goodsLists:[
		'm1',
		'm2',
		'm3'	
		],
	users:[
	{name:'xu',age:20},
	{name:'liu',age:30},
	{name:'wang',age:18},
	]
	};

	var vm=new Vue({
	el:'#app',
	data:data,
	});
</script>
</body>
</html>