Vue 中如何在 JS 中动态添加/删除对象的属性？

在 Vue 中，你可以通过 Vue 实例的 $set 和 Vue.delete 方法来动态添加和删除对象的属性。

动态添加属性 – $set

使用 $set 方法可以动态地给 Vue 数据对象添加响应式属性。这对于在运行时需要添加新属性到响应式对象上非常有用。

// Vue 实例
const vm = new Vue({
  data: {
    myObject: {
      existingProperty: 'some value'
    }
  },
  methods: {
    addNewProperty() {
      // 动态添加属性
      this.$set(this.myObject, 'newProperty', 'new value');
    }
  }
});

动态删除属性 – Vue.delete

使用 Vue.delete 方法可以删除 Vue 数据对象上的一个属性。这样可以确保数据变更后视图也能够响应地更新。

// Vue 实例
const vm = new Vue({
  data: {
    myObject: {
      existingProperty: 'some value',
      propertyToDelete: 'to be deleted'
    }
  },
  methods: {
    removeProperty() {
      // 动态删除属性
      Vue.delete(this.myObject, 'propertyToDelete');
    }
  }
});

这两种方法能够帮助你在 Vue 中动态地添加和删除对象的属性，并确保这些变更能够被 Vue 响应式系统所追踪，从而触发视图的更新。