vue——set方法

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方法