vue中$set和$delete

最新推荐文章于 2023-10-31 10:32:27 发布

Wooofe。

最新推荐文章于 2023-10-31 10:32:27 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_52046784/article/details/121701629

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文介绍了在 Vue.js 中如何使用 `$set` 添加或修改对象属性，确保 Vue 能够实时监测数据变化，以及如何使用 `$delete` 删除对象属性。示例代码展示了在按钮点击事件中进行属性更新、添加和删除的操作，帮助理解这两个方法在实际开发中的应用。

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

$set 添加或修改对象属性和属性值
$delete 删除对象属性

html

<div id="div1">
     <button @click="doUpdate">修改属性</button>
     <button @click="doAdd">添加属性</button>
     <button @click="doDelete">删除属性</button>
     <hr>
     <h2>{{user.name}}</h2>
     <h2>{{user.age}}</h2>
</div>

data () {
    return {
      user:{
        id: 1,
        name: 'John',
      }
    }
 },
methods: {
  doUpdate(){
    this.user.name = 'Tom';
  },
  doAdd(){
  //this.user.age = 18;  //通过普通方式为对象添加属性时vue无法实时监视到
  //this.$set(this.user,'age',23);  //可以实时监控更新信息
    if (this.user.age) {
      this.user.age++;
    }else{
      this.$set(this.user,'age',23);  //第二种方式
    }
  },
  doDelete(){
     if (this.user.age) {
       this.$delete(this.user,'age');
     }
  }
}