Vue中的set方法

【set方法既是一个Vue的全局方法,它也是一个实例方法。】

1、对象使用:

(1)全局方法:Vue.set(vm.userInfo,“address”,“beijing”)(对象名,键名,键值)
(2)实例方法:vm.$set(vm.userInfo,“address”,“beijing”)

2、数组使用:

(1)全局方法:Vue.set(vm.userInfo,2,10)(数组名,下标,新的数据)
(2)实例方法:vm.$set(vm.userInfo,3,8)

<div id="app">
		<!-- 改变对象数据 -->
		<div v-for="(item,key,index) of userInfo">
			{{item}}----{{key}}----{{index}}
		</div>

		<!-- 改变数组数据 -->
		<div v-for="(num,index) of listNum">
			{{num}}
		</div>
	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				userInfo:{
					name:"sally",
					age:31,
					gender:"male",
					salary:"secret"
				},
				listNum:[1,2,3,4]
			}
			
		})
		//对象中使用Set方法
		Vue.set(vm.userInfo,"address","beijing");//set全局方法
		vm.$set(vm.userInfo,"love","seben");//set实例方法

		//数组中使用Set方法
		Vue.set(vm.listNum,2,10);
		vm.$set(vm.listNum,4,20);
vue中改变数据,页面跟着变方式总结:
数组有三种方式:

1、直接改变数组的引用

2、调数组的变异方法

3、set方法

对象有两种方式:

1、直接改变对象的引用

2、set方法

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐