<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="vue.js"></script> <title>Vue中的列表渲染</title> </head> <body> <div id="app"> <div v-for="(item,key,index) of userInfo" :key="index"> {{item}}---{{key}}---{{index}} </div> </div> </body> <script> var vm=new Vue({ el:"#app", data:{ userInfo:{ name:"xixi", age:22, gender:"male" } } }) </script> </html>
我們現在來改變userInfo的值,通過控制台：
我們可以看到userInfo的值確實改變了，可是頁面並沒有發生變化。
我們還可以通過改變userInfo的引用來改變頁面：
這種方式可以渲染頁面。我們還可以使用set方法來改變userInfo的值。同時渲染頁面：
set是Vue的方法，也是Vue實例的方法。可以改成vm.$set()。
數組的修改除了如（pop,push。。。）可用以使用set方法，例如：Vue.set(vm.list,1,5)。這是將數組的第二個元素值改為5。如果使用vm.list[1]=5頁面不會渲染。vm.$set(vm.list,1,5)也可以。