vue3 ②初始页面默认展示3个福利模块,即初始页面“福利名称”从上而下依次分别默认为“福利一”、“福利二”、“福利三”,名称支持修改。 ③若用使用默认的初始名称,删除福利时,福利名称从上而下重新依次命名。
时间: 2024-10-12 11:09:59 浏览: 4
在 Vue 3 中,为了实现上述功能,你可以使用动态数据列表配合 v-for 和 computed 计算属性来构建。假设你有一个数组 `welfares` 存储福利信息,每个福利包含一个名称字段。这里是一个简化的示例代码:
```html
<template>
<div>
<h2>福利列表</h2>
<ul>
<li v-for="(welfare, index) in filteredWelfares" :key="index">
<span>{{ welfare.name }}</span>
<button @click="deleteWelfare(index)">删除</button>
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 初始化的福利数据
const welfares = ref([
{ name: '福利一' },
{ name: '福利二' },
{ name: '福利三' }
]);
// 删除福利时更新索引并重置名称
const deleteWelfare = (index) => {
// 省略实际的删除操作
// 可能需要从服务器获取最新的福利列表并更新
// 如果删除的是前三个福利,那么只需简单地调整其他福利的顺序
if (index <= 2) {
for (let i = index; i < welfares.value.length - 1; i++) {
welfares.value[i].name = `福利${i + 1}`;
}
}
};
// 使用计算属性过滤已删除的福利
const filteredWelfares = computed(() => {
return welfares.value.filter((welfare, index) => {
// 这里可以根据需求判断某个福利是否被删除,这里简单模拟为不等于 null 或 ''
return welfare.name !== null && welfare.name.trim() !== '';
});
});
</script>
```
在这个例子中,`filteredWelfares` 是一个计算属性,它会根据 `welfares` 变化实时过滤掉已被删除的福利。当用户点击删除按钮时,会根据索引位置更新剩余福利的名称。
注意,这个示例假设你有一个服务器端提供的福利列表,如果需要从服务器获取新列表,记得替换 `deleteWelfare` 方法中的内容。