一、从删除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方法来添加和删除列表项。
原创文章，作者：FSHE，如若转载，请注明出处：https://www.506064.com/n/138426.html
微信扫一扫 
支付宝扫一扫 