Vue删除List中一条数据

发布时间：2023-05-19

一、从删除list中的一条数据

在Vue中，我们可以使用v-for指令来遍历一个数组并渲染数组中的每个值。如果我们想要删除数组中的一条数据，可以使用数组的splice方法。

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }} <button @click="remove(index)">Remove</button>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    }
  },
  methods: {
    remove(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

在上面的代码中，我们首先将一个包含四个元素的数组绑定到了Vue的data里。然后，使用v-for指令对数组进行遍历，并使用按钮将每个元素的删除方法绑定到click事件上。点击按钮时，将调用Vue实例中的remove方法并传递当前元素的索引作为参数。

二、从list中删除某一条特定的数据

如果我们需要从数组中删除某个特定的元素，我们可以使用JavaScript的filter方法。该方法将返回一个新的数组，其中包含满足我们定义的条件的所有元素。因此，我们可以将该数组复制到Vue实例的list中。

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }} <button @click="remove(item)">Remove</button>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    }
  },
  methods: {
    remove(item) {
      this.list = this.list.filter(i => i !== item);
    }
  }
}
</script>

在上面的代码中，我们仍然使用v-for指令进行遍历，并使用按钮将每个元素的删除方法绑定到click事件上。在remove方法中，我们将调用Vue实例中的filter方法并传递一个返回条件，即数组中与当前元素不同的所有元素组成的新数组。

三、Vue中List的添加和删除

从Vue的官方文档中我们可以知道，Vue中的列表渲染最常见的一个用途就是维护一个状态列表，例如我们在一个待办事项列表中添加和删除待办事项。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list">
        {{item}} <button @click="remove(index)">Remove</button>
      </li>
    </ul>
    <p>
      <input v-model="text">
      <button @click="add">Add</button>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '',
      list: []
    }
  },
  methods: {
    add() {
      this.list.push(this.text);
      this.text = '';
    },
    remove(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

在上面的代码中，我们首先初始化了一个空数组作为list和一个空的字符串作为text。我们使用v-model指令将输入的文本绑定到text变量，并使用一个添加按钮将输入框中的文本添加到list数组。 使用v-for指令实现遍历list数组，并将每个元素渲染成一个列表项。我们使用一个按钮将每个元素的删除方法绑定到click事件上。删除元素时，我们简单地调用Vue实例中的splice方法并传递要删除的元素的索引。

总结

Vue提供了许多实用的指令和工具来帮助我们处理数组和列表。在删除Vue中的List中的一条数据时，我们可以使用JavaScript的splice方法或者filter方法来实现。在维护一个状态列表时，我们可以使用Vue的v-for指令和一些简单的JavaScript方法来添加和删除列表项。

推荐文章