当前位置：首页 > VUE

vue实现添加删除

2026-03-08 05:00:52VUE

Vue 实现添加和删除功能

在 Vue 中实现添加和删除功能通常涉及数据绑定、事件处理和列表渲染。以下是一个完整的示例，展示如何通过 Vue 实现动态添加和删除列表项。

初始化 Vue 实例

创建一个 Vue 实例，并定义数据和方法。数据包括一个数组 items 和一个输入框绑定的变量 newItem。

new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3'],
    newItem: ''
  },
  methods: {
    addItem() {
      if (this.newItem.trim() !== '') {
        this.items.push(this.newItem.trim());
        this.newItem = '';
      }
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

模板部分

在 HTML 中，使用 v-for 渲染列表，并通过 v-model 绑定输入框的值。为按钮绑定 addItem 和 removeItem 方法。

vue实现添加删除

<div id="app">
  <input v-model="newItem" placeholder="Add new item">
  <button @click="addItem">Add</button>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
      <button @click="removeItem(index)">Delete</button>
    </li>
  </ul>
</div>

功能说明

添加功能：通过 v-model 绑定输入框的值到 newItem，点击“Add”按钮时调用 addItem 方法，将输入的值添加到 items 数组中。
删除功能：每个列表项旁有一个“Delete”按钮，点击时调用 removeItem 方法并传入当前项的索引，从 items 数组中移除对应项。

完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Add/Remove Items</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input v-model="newItem" placeholder="Add new item">
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">Delete</button>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        items: ['Item 1', 'Item 2', 'Item 3'],
        newItem: ''
      },
      methods: {
        addItem() {
          if (this.newItem.trim() !== '') {
            this.items.push(this.newItem.trim());
            this.newItem = '';
          }
        },
        removeItem(index) {
          this.items.splice(index, 1);
        }
      }
    });
  </script>
</body>
</html>