vue中如何给data里面的变量增加属性

Damara ·

更新时间:2024-09-20

· 876 次阅读

给data里面的变量增加属性

vue框架是使用mvvm模式

我废话不多说直接上方法了

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