• 在Vue中如何使用this.$delete 方法删除对象属性
  • 发布于 2个月前
  • 409 热度
    0 评论
有时候,我们想要使用Vue.js从数据对象中删除一个属性。在本文中,我们将介绍如何使用Vue.js从数据对象中删除属性。要从Vue.js的数据对象中删除属性,我们可以使用 this.$delete 方法。例如,我们可以写:
<template>
  <div id="app">
    {{ users }}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      users: {
        foo: { firstName: "jane", lastName: "smith" },
        bar: { firstName: "john", lastName: "green" },
      },
    };
  },
  mounted() {
    this.$delete(this.users, "foo");
  },
};
</script>
使用 this.$delete 方法从 this.users 响应式属性中删除 foo 属性。
$delete 方法将触发Vue的响应性,以更新 this.users 对象以删除 foo 属性。

因此,从模板中,我们应该看到 users 现在是:
{ "bar": { "firstName": "john", "lastName": "green" } }
我们还可以使用 Vue.delete 方法来做同样的事情,写成:
<template>
  <div id="app">
    {{ users }}
  </div>
</template>
<script>
import Vue from "vue";
export default {
  name: "App",
  data() {
    return {
      users: {
        // 堆代码 duidaima.com
        foo: { firstName: "jane", lastName: "smith" },
        bar: { firstName: "john", lastName: "green" },
      },
    };
  },
  mounted() {
    Vue.delete(this.users, "foo");
  },
};
</script>
我们只是用 Vue.delete 替换了 this.$delete 。要从Vue.js的数据对象中删除属性,我们可以使用 this.$delete 方法。我们还可以使用 Vue.delete 方法来做同样的事情。
用户评论