如何在 Vue.js 的列表中动态添加或删除项目？

在 Vue.js 中，我们可以使用 v-for 指令来循环遍历数组，并动态渲染数据列表。但是，在实际应用中，我们经常需要动态地向列表中添加或删除项目，以及更新列表的数据。

本文将介绍如何在 Vue.js 的列表中动态添加或删除项目，并提供相关的代码示例。

动态添加项目

在 Vue.js 中，我们可以使用 push 方法向数组的末尾添加一个新项目。下面的示例演示了如何在列表中添加一个新项目：

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <button @click="addItem">添加项目</button>
  </div>
</template>

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

在上面的示例中，我们首先在 data 中定义了一个数组 items，然后在模板中使用 v-for 指令循环遍历数组，并渲染每个项目。最后，我们添加了一个按钮，并在点击按钮时调用 addItem 方法向数组中添加一个新项目。

动态删除项目

在 Vue.js 中，我们可以使用 splice 方法从数组中删除一个或多个项目。下面的示例演示了如何在列表中删除一个项目：

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

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

在上面的示例中，我们在模板中为每个项目添加了一个删除按钮，并在点击按钮时调用 deleteItem 方法从数组中删除相应的项目。注意，在 v-for 指令中必须为每个列表项提供一个唯一的 key 属性，以便 Vue.js 能够追踪每个项目的变化。

总结

本文介绍了如何在 Vue.js 的列表中动态添加或删除项目。通过使用 push 和 splice 方法，我们可以向数组中添加或删除项目，并实时更新视图。使用这些方法可以帮助我们快速、方便地处理动态数据列表。