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

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

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

給data里面的變量增加屬性

vue框架是使用mvvm模式

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

那是不是這樣呢我們只要把vue中data中的值發(fā)生變化dom樹就會(huì)隨時(shí)更新呢

<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? ? 同時(shí)視圖也發(fā)生了變化
</script>

我們?cè)趘ue的實(shí)例外面訪問里面的變量是可以的

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

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

app.test.a=“test.b”

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

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

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

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

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

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

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

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

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

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

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

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中的響應(yīng)式對(duì)象動(dòng)態(tài)添加屬性

data響應(yīng)式對(duì)象動(dòng)態(tài)添加屬性

<template>
  <div>
    名字：{{ peple.name }}<el-button style="margin-left:10px" @click="setSex">點(diǎn)擊添加性別</el-button
    ><span style="margin-left:20px" v-if="this.peple.sex"
      >性別：{{ peple.sex }}</span
    >
  </div>
</template>

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