创建一个简单的Vue组件,用于显示一个列表,并实现动态添加和删除列表项的功能。
时间: 2024-06-14 18:05:40 浏览: 145
Vue单文件组件实现列表行添加、删除
以下是一个简单的Vue组件,用于显示一个列表,并实现动态添加和删除列表项的功能:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
<button @click="deleteItem(index)">删除</button>
</li>
</ul>
<input type="text" v-model="newItem">
<button @click="addItem">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
newItem: ''
}
},
methods: {
addItem() {
if (this.newItem !== '') {
this.list.push(this.newItem);
this.newItem = '';
}
},
deleteItem(index) {
this.list.splice(index, 1);
}
}
}
</script>
```
这个组件包含一个列表,使用`v-for`指令循环渲染列表项,并使用`:key`绑定每个列表项的唯一标识。每个列表项后面有一个删除按钮,点击按钮会调用`deleteItem`方法删除对应的列表项。
在组件的`data`选项中,定义了一个`list`数组用于存储列表项,以及一个`newItem`变量用于绑定输入框的值。
`addItem`方法用于向列表中添加新的项,首先判断输入框的值是否为空,如果不为空,则将输入框的值添加到`list`数组中,并清空输入框的值。
`deleteItem`方法用于删除列表中的某一项,通过`splice`方法从`list`数组中移除对应的项。
你可以在父组件中使用这个子组件,并在父组件中传递数据给子组件,实现动态添加和删除列表项的功能。
阅读全文