vue $set修改对象
生活随笔
收集整理的這篇文章主要介紹了
vue $set修改对象
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在vue開發中，當生成vue實例后，再次給數據賦值時，有時候并不會自動更新到視圖上去；
eg:<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>vue $set的使用</title> <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script> </head> <body> <div id="app">姓名：{{ name }}<br>手機：{{phone}}<br>性別：{{sex}}<br>說明：{{list.instr}} </div> <script> var data = {name: "簡書",phone: '15736882244',list: {instr: 'my name is Yilia'} }//var key = 'instr';var vm = new Vue({el:'#app',data: data,ready: function(){
//Vue.set(data,'sex', '男');
//this.$set('list.'+key, 'who are you?');
} }); data.sex = '女'； </script> </body> </html>
這樣運行的結果是
姓名：簡書
年齡：15736882244
性別：
說明：my name is Yilia
解決方法是：
Vue.set(data,'sex', '男')還可以使用 vm.$set實例方法，這也是全局 Vue.set方法的別名:
var key = 'instr'; //這種主要用于當對象中某個屬性值動態生成時處理方式 this.$set('list.'+key, 'who are you?');或 this.$set('list.instr', 'who are you?');?
轉載于:https://www.cnblogs.com/qing619/p/8862282.html
總結
以上是生活随笔為你收集整理的vue $set修改对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 混合开发的坑(7) ---输入文本时，键
- 下一篇： 解决 vue路由跳转到新页面底部而不是顶