先上一坨代码
<body>
<div id="app">
<div v-for="(item, key, index) of userInfo">
{{item}} --- {{key}} --- {{index}}
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
userInfo: {
name: 'pengyidong',
age: 22,
}
}
})
</script>
</body>
当我们想在userInfo中添加一条数据的时候，应该怎么操作？
首先我们可以使用vm.userInfo 去设置一个全新的变量。
vm.userInfo = {
name:'pengyidong',
age: 22,
address: '广州'
}
vue提供一个更加简单的set方法，向一个对象中添加数据，当数据改变时，页面也会随之变化。
Vue.set(vm.userInfo,'job','前端')
改变数组数据，页面跟着变化的三种方法
-
直接改变数组引用
-
用数组的变异方法
-
用set方法（包括vue的set和实例的set）
改变对象数据，页面跟着变化的三种方法
-
改变引用
-
直接改值
-
用set方法（包括vue的set和实例的set）
set方法，向一个对象中加数据,当数据发生变化，页面变化
对象：
-
全局：Vue.set(obj,key,value)
-
vue实例：vm.$set(obj,key,value)
// 全局 Vue.set(vm.userInfo,'job','前端') // vue实例 vm.$set(vm.userInfo,'job','前端')
数组：
-
全局：Vue.set(arr,index,value)
-
vue实例：vm.$set(arr,index,value)
userInfo: [1,2,3,4] // 全局 Vue.set(vm.userInfo,1,5) // vue实例 vm.$set(vm.userInfo,2,10)