<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中set方法</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <!--<div v-for="(item,key,index) of userInfo">--> <!--{{item}}---{{key}}---{{index}}--> <!--</div> <!–对对象进行循环–> --> <div v-for="(item,index) of userInfo1"> {{item}} </div> <!--对数组进行循环--> </div> <script> var vm = new Vue({ el:"#app", data:{ // userInfo:{ // name:'alex', // age:'27', // gender:'male', // salary:'secret' // } userInfo1:[1,2,3,4] } }) </script> </body> </html> <!-- Vue.set(vm.userInfo,'address','beijing') 此时就是在不改变地址引用 就可以直接改变数据 并且渲染在页面上 vm.$set(vm.userInfo,'address','beijing') 也可以实现一样的效果 对于列表 上述两种set用法都可以实现改变数据 渲染在网页上 Vue.set(vm.userInfo,1,5) vm.$set(vm.userInfo,2,10) -->