vue中如何給data里面的變量增加屬性

更新時間：2022年03月03日 11:30:23 作者：yunchong_zhao

這篇文章主要介紹了vue中如何給data里面的變量增加屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

給data里面的變量增加屬性

vue框架是使用mvvm模式

里面有一種通知機制如果數(shù)據(jù)發(fā)生了變化就會通過視圖進行更新

那是不是這樣呢我們只要把vue中data中的值發(fā)生變化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? ? 同時視圖也發(fā)生了變化
</script>

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

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

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

app.test.a=“test.b”

會發(fā)現(xiàn) 視圖發(fā)生了變化

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

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

最后發(fā)現(xiàn)頁面上也確實增加了 test.c 這就是vue響應式數(shù)據(jù)的強大之處

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

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

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

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

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

但是在工作的時候可能需要我們網(wǎng)里面新增一些數(shù)據(jù) 并讓他和視圖實時更新

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

1.通過數(shù)組操作

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中的響應式對象動態(tài)添加屬性

data響應式對象動態(tài)添加屬性

<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>