先上一坨代码
<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>
首先我们可以使用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)