给uni-app的卡片组件中的参数额外信息加删除按钮
时间: 2023-11-28 13:47:07 浏览: 67
您可以通过在卡片组件中添加一个按钮来实现删除功能。在按钮被点击时,您可以触发一个函数来删除该卡片。
以下是一个示例代码:
```html
<template>
<div class="card" v-for="item in items" :key="item.id">
<div class="card-header">{{ item.title }}</div>
<div class="card-body">{{ item.content }}</div>
<div class="card-footer">
<span>{{ item.timestamp }}</span>
<button @click="deleteCard(item.id)">删除</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, title: 'Card 1', content: 'Card content 1', timestamp: '2021-01-01' },
{ id: 2, title: 'Card 2', content: 'Card content 2', timestamp: '2021-01-02' },
{ id: 3, title: 'Card 3', content: 'Card content 3', timestamp: '2021-01-03' }
]
}
},
methods: {
deleteCard(id) {
this.items = this.items.filter(item => item.id !== id)
}
}
}
</script>
```
在上面的代码中,我们给每个卡片添加了一个“删除”按钮,并为按钮绑定了一个点击事件。当点击按钮时,会调用 `deleteCard` 方法,该方法会过滤掉传入的卡片 ID,并重新设置 `items` 数组,从而实现删除该卡片的功能。