this.$set的用法

最新推荐文章于 2024-05-07 19:44:55 发布

如果决定要走又何必挽留

最新推荐文章于 2024-05-07 19:44:55 发布

阅读量480

点赞数 8

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_59076775/article/details/135731192

版权

Vue 专栏收录该内容

59 篇文章 7 订阅

订阅专栏

本文介绍了在Vue中，如何在data对象之外使用`this.$set`方法实现动态添加响应式属性，以及对比了不使用$Set时的非响应式效果。

摘要由CSDN通过智能技术生成

作用：

在data里面绑定的数据具有响应式的效果,也就是我们说的V-Model 数据更新视图,视图也能更新数据，如果不是data里面的数据如何添加响应式呢？

this.$Set这个方法能够实现

用法：

this.$Set('要添加的对象','要添加的属性’,要添加的值)

代码案例(使用this.$set)：

<template>
  <div class="">
    <div>
      {{ obj }}
    </div>
    <button @click="fn">点击打印</button>
    <button @click="fn1">按钮2</button>
    <button @click="fn2">按钮3</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "张三",
      },
    };
  },
  methods: {
    fn() {
      console.log(this.obj);
    },
    fn1() {
      // this.obj.age = 20;
      this.$set(this.obj, "age", 20);
    },
    fn2(){
      this.obj.age=30+12
    },
  },
  components: {},
};
</script>

<style scoped lang="less"></style>

过程:在data里面绑定一个对象，通过点击按钮2,在里面加一个age属性,将年龄设置成20岁:

出现响应式

代码案例(不使用 this.$set)

<template>
  <div class="">
    <div>
      {{ obj }}
    </div>
    <button @click="fn">点击打印</button>
    <button @click="fn1">按钮2</button>
    <button @click="fn2">按钮3</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "张三",
      },
    };
  },
  methods: {
    fn() {
      console.log(this.obj);
    },
    fn1() {
      this.obj.age = 20;
      // this.$set(this.obj, "age", 20);
    },
    fn2(){
      this.obj.age=30+12
    },
  },
  components: {},
};
</script>

<style scoped lang="less"></style>

直接通过 this.obj.age = 20; 添加页面未出现响应式的效果。