vue对象添加属性(key:value)、显示和删除属性方式

下面我将详细讲解“vue对象添加属性、显示和删除属性方式”的完整攻略。

添加属性

在vue对象中添加属性通常有两种方式：

1. 直接使用this.$set方法添加属性

可以使用 this.$set(vm.property, 'newProperty', value) 方法来添加新的属性，其中 vm 是vue实例， property 是vue实例中已有的属性， newProperty 是需要添加的新属性名， value 是对应的属性值。

<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Tom',
    };
  },
  methods: {
    addAge() {
      this.$set(this, 'age', 18)
    }
  }
}
</script>

2. 在data对象中声明新的属性

在vue的data选项中声明属性时，如果在实例化后需要添加新的属性，可以直接赋值即可。

<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Tom',
      age: 18,
    };
  },
  methods: {
    addGender() {
      this.gender = 'male';
    }
  }
}
</script>

在使用以上两种方式添加属性后，就可以在组件中直接使用属性进行渲染。

显示属性

显示vue对象中的属性通常有两种方式：

1. 直接在模板中使用属性

可以在模板中直接使用 {{propertyName}} 的方式来显示属性。

<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Tom',
      age: 18,
    };
  },
}
</script>

2. 使用v-bind指令

可以使用 v-bind 指令将属性与组件绑定，这样属性就可以在组件中使用。 v-bind 意思是绑定一个属性到一个表达式。

<template>
  <div>
    <p v-bind:title="name">{{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Tom',
      age: 18,
    };
  },
}
</script>

以上两种方式可以根据需要随意组合使用。

删除属性

删除vue对象中的属性也有两种方式：

1. 使用Vue.delete方法删除属性

使用 Vue.delete(target,propertyName/index) 方法，其中 target 是需要删除的目标对象， propertyName/index 是需要删除的属性名或下标。

<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <button @click="deleteAge">删除age属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Tom',
      age: 18,
    };
  },
  methods: {
    deleteAge() {
      Vue.delete(this, 'age');
    }
  }
}
</script>

2. 直接使用delete方法删除属性

直接使用 delete target[propertyName/index] 方法来删除vue对象中的属性。

<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <button @click="deleteAge">删除age属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Tom',
      age: 18,
    };
  },
  methods: {
    deleteAge() {
      delete this.age;
    }
  }
}
</script>

以上就是关于“vue对象添加属性、显示和删除属性方式”的完整攻略，希望对你有所帮助。