vue中如何給data裡面的變數增加屬性

2022-03-03 13:00:18

給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 style="margin-left:10px" @click="setSex">點選新增性別</el-button
    ><span style="margin-left:20px" 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>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue中如何給data裡面的變數增加屬性

目錄

給data裡面的變數增加屬性

vue框架是使用mvvm模式

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

給data中的響應式物件動態新增屬性

熱門文章