016_Vue数组数据的响应式处理

最新推荐文章于 2024-01-09 11:35:15 发布

原创最新推荐文章于 2024-01-09 11:35:15 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中使用Vue.set和vm.$set实现数组数据的响应式更新，通过实例演示了如何动态修改数组元素及其索引，并展示了相关代码和效果。

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

1. 数组数据的响应式处理

1.1. 第一个参数表示要处理的数组名称; 第二个参数表示要处理的数组索引; 第三个参数表示要处理的数组的值。

Vue.set(vm.list, index, newValue);
vm.$set(vm.list, index, newValue);

1.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>数组数据的响应式处理</title>
	</head>
	<body>
		<div id="app">
			<div>
				<ul><li v-for="item in list">{{item}}</li></ul>
    		</div>
    		<div>
      			<span>{{info.name}}</span>
      			<span>{{info.age}}</span>
      			<span>{{info.gender}}</span>
    		</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					list: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计"]
				}
			});
			// vm.list[1] = "JavaScript权威指南"; // 这样修改数组数据, 不具备响应式

			Vue.set(vm.list, 0, "你不知道的JavaScript");
			vm.$set(vm.list, 1, "JavaScript权威指南");
		</script>
	</body>
</html>

1.3. 效果图