vue删除添加

Vue.js 是一个流行的 JavaScript 框架，用于构建现代化的 Web 应用程序。在 Vue.js 中添加和删除元素非常简单，可以使用 v-for 指令来迭代列表并添加或删除元素。

添加元素：
1. 在 data 中定义一个数组，存储要添加的元素；
2. 使用 v-for 指令迭代数组，并将元素渲染到页面上；
3. 当添加新元素时，只需将新元素添加到数组中。

例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['item 1', 'item 2', 'item 3'],
    };
  },
  methods: {
    addItem() {
      this.items.push('new item');
    },
  },
};
</script>

删除元素：
1. 在 data 中定义一个数组，存储要删除的元素；
2. 使用 v-for 指令迭代数组，并将元素渲染到页面上；
3. 当删除元素时，只需将元素从数组中删除。

例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }} <button @click="removeItem(index)">Remove</button></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['item 1', 'item 2', 'item 3'],
    };
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

以上代码演示了如何添加和删除元素，可以根据实际需求进行修改。