element vue Array数组和Map对象的添加与删除操作

下面是关于Element Vue中Array数组和Map对象的添加和删除操作的完整攻略。

Array数组的添加和删除

添加元素

向数组中添加元素可以使用原生的Javascript方法push()、unshift()，也可以使用Vue的$set()方法。

首先，我们创建一个数组arr，然后使用push()和unshift()方法添加元素。

<script>
export default {
  data() {
    return {
      arr: ['a', 'b', 'c']
    }
  },
  methods: {
    pushItem() {
      this.arr.push('d'); // 在数组尾部添加d
    },
    unshiftItem() {
      this.arr.unshift('0'); // 在数组头部添加0
    }
  }
}
</script>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="pushItem">在尾部添加</button>
    <button @click="unshiftItem">在头部添加</button>
  </div>
</template>

$set()方法用法与push()和unshift()不同，它需要指定要插入的位置，也就是数组的索引值。例如，下面的代码向数组的第1个位置插入了元素d。

this.$set(this.arr, 1, 'd');

删除元素

从数组中删除元素也有多种方式，包括原生的JavaScript方法pop()和shift()，还有Vue的$delete()方法。

与添加元素的例子相似，我们也创建一个数组，并使用pop()和shift()方法删除元素。

<script>
export default {
  data() {
    return {
      arr: ['a', 'b', 'c']
    }
  },
  methods: {
    popItem() {
      this.arr.pop(); // 删除数组的最后一个元素
    },
    shiftItem() {
      this.arr.shift(); // 删除数组的第一个元素
    }
  }
}
</script>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="popItem">删除尾部元素</button>
    <button @click="shiftItem">删除头部元素</button>
  </div>
</template>

Vue的$delete()方法也是通过指定删除元素的索引来实现删除操作，例如以下代码将删除数组中索引为1的元素。

this.$delete(this.arr, 1);

Map对象的添加和删除

添加元素

通过使用JavaScript原生的Map对象，我们可以方便地向Map对象中添加元素。以下示例将向Map对象中添加两个键值对。

<script>
export default {
  data() {
    return {
      mMap: new Map([['name', 'Tom'], ['age', 20]])
    }
  },
  mounted() {
    this.mMap.set('sex', 'male'); // 添加一个键值对
  }
}
</script>

<template>
  <div>{{ mMap }}</div>
</template>

删除元素

从Map对象中删除元素的方法是使用delete()方法，该方法接受一个键作为输入，并从Map对象中删除该键对应的键值对。以下示例将删除Map对象中具有键值"name"的键值对。

this.mMap.delete('name');

总结

以上就是关于Element Vue中Array数组和Map对象的添加和删除操作的完整攻略。对于Array数组，我们可以使用JavaScript原生的方法或Vue的$set()和$delete()方法来进行添加和删除操作。对于Map对象，我们可以使用原生的JavaScript方法set()和delete()来添加和删除元素。