vue 中的set 方法 解決列表渲染的問題
阿新 • • 發佈:2018-11-05
列表渲染中,可能值變了但是頁面沒有響應。
Vue 提供了 set 方法,解決這個問題。
var app = new Vue({ el: '#app', data:{ onelist: [{ id: "010101020304", text: "hello" },{ id: "0202020304", text: "ok" },{ id: "0303030405", text: "yes" } ], oneobject: { name: "Tom", age: 18, gender: "male" } } }) </script>
方法一 Vue 的set 方法
物件:通過 Vue.set(app.oneobject,"address","c") 來修改資料並響應
陣列:通過 Vue.set(app.onelist,1,"c") 來修改資料並響應
方法二 Vue 例項的方法
物件:通過 app.$set(app.oneobject,"address","c")
陣列:通過 Vue.set(app.onelist,1,"c") 來修改資料並響應
總結,vue 中改變陣列,且響應的三種方式:
改引用,使用push 等變異方法改陣列,vue 中的set 方法
vue 中改變物件,且響應的兩種方式:
改引用,vue 中的set 方法。