5.8数组相关操作

最新推荐文章于 2025-05-05 22:15:46 发布

泡老师大迷弟

最新推荐文章于 2025-05-05 22:15:46 发布

阅读量148

点赞数

分类专栏： Vue学习文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/PengK_aha/article/details/128101263

版权

Vue学习专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Vue.js中数组的相关API，包括变异方法（如push、pop、splice等）和替换方法（如filter、concat、slice等），并展示了如何通过Vue.set动态修改响应式数据，包括数组元素和对象属性。示例代码演示了添加、删除和替换数据的操作。

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

一、数组相关API

   1.变异方法（修改原有数据）
       push()
       pop()
       shift()
       unshift()
       splice()
       sort()
       reverse()
   2.替换数组（生成新的数组）
       filter()
       concat()
       slice()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<span>
					<input type="text" v-model="fname"/>
					<button @click="add">添加</button>
					<button @click="del">删除</button>
					<button @click="change">替换</button>
				</span>
			</div>
			<ul>
				<li :key = 'index' v-for="(item, index) in fruits">{{item}}</li>
			</ul>
			
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	数组相关API
	1.变异方法（修改原有数据）
		push()
		pop()
		shift()
		unshift()
		splice()
		sort()
		reverse()
	2.替换数组（生成新的数组）
		filter()
		concat()
		slice()
		
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 fname: '',
				 fruits: ['apple', 'orange', 'banana']
			},
			methods: {
				add: function () {
					this.fruits.push(this.fname);
				},
				del: function() {
					this.fruits.pop(this.fname);
				},
				change: function() {
					this.fruits = this.fruits.slice(0, 1);
				}
			}
		});
	</script>
</html>

二、修改响应式数据(动态处理响应式数据)

       //数组修改元素
       Vue.set(vm.list, 1, 'lemon')
       vm.$set(vm.list, 0 , 'lemon');
       //对象修改属性
       vm.$set(vm.info, 'name', '王五')
           1.参数一表示要处理的数组名称
           2.参数二表示要处理的数组的索引
           3.参数三表示要处理的数组的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li :key = 'index' v-for="(item, index) in list">{{item}}</li>
			</ul>
			<div>{{info.name}}</div>
			<div>{{info.age}}</div>
			<div>{{info.gender}}</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	3.修改响应式数据(动态处理响应式数据)
		//数组修改元素
		Vue.set(vm.list, 1, 'lemon')
		vm.$set(vm.list, 0 , 'lemon');
		//对象修改属性
		vm.$set(vm.info, 'name', '王五')
			1.参数一表示要处理的数组名称
			2.参数二表示要处理的数组的索引
			3.参数三表示要处理的数组的值
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 list: ['apple', 'orange', 'banana'],
				 info: {
					 name: '李四',
					 age: 12,
					 
				 }
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
		// vm.list[1] = 'lemon';
		// Vue.set(vm.list, 1, 'lemon')
		//数组修改
		vm.$set(vm.list, 3 , 'lemon');
		//对象新增属性
		vm.$set(vm.info, 'name', '王五')
		
	</script>
</html>