vue中怎么給data里面的變量增加屬性

這篇“vue中怎么給data里面的變量增加屬性”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue中怎么給data里面的變量增加屬性”文章吧。

給data里面的變量增加屬性

vue框架是使用mvvm模式

里面有一種通知機制 如果數據發生了變化 就會通過 視圖進行更新

 那是不是這樣呢 我們只要把vue中data中的值發生變化dom樹就會隨時更新呢

<div id="app">
            <ul>
                <li v-for="(val,idx) in test">
                    {{val}}
                </li>
            </ul>
            <button @click="add">添加新屬性</button>
        </div>

<script>
        var app=new Vue({
            el:"#app",
            data:{
                test:{
                    "a":'test.a',
                }
            }
        })
        console.log(app.test.a);// 可以訪問的到
        app.test.a="test.b";
        console.log(app.test.a); // 打印出來 test.b    同時視圖也發生了變化
</script>

我們在vue的實例外面訪問里面的變量是 可以的

直接  app.test.a  就可以訪問到  打印出來 test.a

我們要是在這里直接更改呢 

app.test.a=“test.b”

會發現 視圖發生了變化

但是我們要是 在這里給 app.test 增加屬性看看還是否可以

       app.test.b="test.c";
        console.log(app.test.b);

最后發現頁面上也確實增加了  test.c   這就是vue響應式數據的強大之處

那么我們從 vue實例里面 試試看直接賦值 能不能增加 屬性

methods:{
                add:function(){
                    this.test.b="test.c"；     
                   console.log(this.test);
                }
            }

我在界面上創建一個按鈕增加了一個add方法    通過方法調用試試看能不能增加新的屬性

打印出來 確實顯示 在vue的data 數據中 但實際上并沒有在視圖中更新  

知道的同學 可能了解  vue 的數據雙向綁定是 通過數據劫持 結合 訂閱者——發布者  通俗點講就是 那個被我們后來直接加上的屬性 沒有在 vue的 通知機制機制里面  所以沒法享受實時的監聽機制

但是在工作的時候 可能需要我們網里面新增 一些數據  并讓他和視圖實時更新

我廢話不多說直接上方法了 

1.通過數組操作  

this.test.push({isActive:fasle});

2.通過全局api $set

this.$set(this.test,"isActive",fasle);

3.通過Object.assign()

this.test=Object.assign({},this.test,{"b":"test.c"})

第一種方法 是我自己填加上去 在一中特殊的情況下 可以使用 

給data中的響應式對象動態添加屬性

data響應式對象動態添加屬性

<template>
  <div>
    名字：{{ peple.name }}<el-button  @click="setSex">點擊添加性別</el-button
    ><span  v-if="this.peple.sex"
      >性別：{{ peple.sex }}</span
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      peple: {
        name: "長大"
      }
    };
  },
  methods: {
    setSex() {
      this.$set(this.peple, "sex", "男");
    }
  }
};
</script>

以上就是關于“vue中怎么給data里面的變量增加屬性”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。