vue2.0实现列表数据增加和删除

下面是 "Vue2.0 实现列表数据增加和删除" 的完整攻略。

一、vue2.0实现列表数据增加

1. 创建一个 Vue 实例

首先，创建一个 Vue 实例，本文将使用 Vue CLI 来方便构建项目。可以使用如下命令创建基于webpack-simple模板的Vue项目：

vue init webpack-simple vue-list

2. 编写组件以及绑定数据

在Vue项目中，将组件和数据绑定起来是一个重要的教学点，我们可以通过编写下面的组件来练习：

<template>
  <div>
    <input v-model="newItem">
    <button @click="addItem()">Add</button>

    <ul>
      <li v-for="(item, id) in items">
        {{ item }}
        <button @click="deleteItem(id)">x</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      items: []
    }
  },
  methods: {
    addItem() {
      if (this.newItem) {
        this.items.push(this.newItem)
        this.newItem = ''
      }
    },
    deleteItem(id) {
      this.items.splice(id, 1)
    }
  }
}
</script>

在上面的代码中，我们创建了一个Todo List组件，可以在输入框中输入新的代办事项，然后点击“Add”按钮添加到列表中，可以通过点击x来删除某个代办事项。以上代码中，我们绑定了以下数据：

• newItem：表示用户输入的新代办事项，使用v-model指令将输入框和数据绑定，并设置初始值为空字符串。
• items：表示代办事项列表，使用v-for指令将所有代办事项渲染到页面中，并使用@click指令在删除按钮上监听点击事件。

3. 测试代码

为了测试我们编写的代码，可以在 main.js 中添加如下代码：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

然后，执行 npm run dev 命令来启动服务，访问 http://localhost:8080，在页面中测试你的代码。

二、vue2.0实现列表数据删除

为了实现列表数据删除，我们需要做如下几步：

1. 监听@click事件

在删除按钮上添加@click事件，例如：<button @click="deleteItem(id)">x</button>，表示在按钮上监听点击事件，当点击按钮时调用deleteItem()方法。

2. 在deleteItem()函数中删除指定的数据

当点击删除按钮后，会调用我们在组件中定义的deleteItem()方法，在该函数中，可以使用splice()方法删除数组中指定的元素，例如：

deleteItem(index) {
  this.list.splice(index, 1);
}

以上代码中，我们使用splice()方法，在list数组中删除指定索引 index 的元素。删除一个元素只需要传递一个参数，此处为1。

3. 修改list数组时确保数据响应式变化

由于Vue2.x使用了immutable的设计思想，Vue保证了所有数据都是响应式的。当我们删除数组中的元素时，必须在Vue的响应式系统中通知它们的变化，以便于Vue及时更新视图。

例如：

deleteItem(index) {
  this.list.splice(index, 1);
  this.list = [...this.list]; //复制一个新的数组，触发数据响应式变化
}

当我们删除指定元素后，使用ES6的扩展运算符...快捷的复制一个新的数组，从而触发数据响应式变化，以更新视图。

示例说明

以下是一个完整的示例代码，可以在Vue项目中的App.vue文件中编写：

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

<script>
export default {
  data() {
    return {
      list: ['Apple', 'Banana', 'Orange', 'Pear']
    };
  },
  methods: {
    deleteItem(index) {
      this.list.splice(index, 1);
      this.list = [...this.list]; //复制一个新的数组，触发更新视图
    }
  }
}
</script>