怎么设置剩下一个“/home”标签的时候全部不显示
时间: 2024-01-22 16:04:07 浏览: 15
你可以在组件中添加一个计算属性,用来判断是否只剩下一个 `/home` 标签,如果是,则返回 `false`,否则返回 `true`。然后在模板中使用该计算属性来控制是否显示标签列表。
具体代码实现如下:
```
<template>
<div>
<ul>
<li v-for="(item,index) in tagsList" :key="index" :class="{ 'active': isActive(item.path) }">
<router-link :to="item.path" class="tags-li-title">
{{item.title}}
</router-link>
<span v-if="showCloseIcon(index)" class="tags-li-icon" @click="closeTags(index)">
<i class="el-icon-close"></i>
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tagsList: [
{ title: '首页', path: '/home' },
{ title: '文章', path: '/article' },
{ title: '关于', path: '/about' },
],
};
},
methods: {
isActive(path) {
return this.$route.path === path;
},
closeTags(index) {
this.tagsList.splice(index, 1);
},
showCloseIcon(index) {
return !(this.tagsList.length === 1 && this.tagsList[0].path === '/home' && index === 0);
},
},
};
</script>
```
在上面的代码中,我们添加了一个 `showCloseIcon` 计算属性来判断是否只剩下一个 `/home` 标签。具体来说,我们判断标签列表的长度是否为 1,且第一个标签的路径是否为 `/home`,如果是,再判断当前标签的索引是否为 0,如果也是,则返回 `false`,否则返回 `true`,即显示关闭按钮。
最后,在模板中使用 `v-if` 指令来判断是否显示关闭按钮。当 `showCloseIcon(index)` 返回 `true` 时,即剩下多个标签或者只剩下 `/home` 标签但不是第一个标签,显示关闭按钮。否则不显示关闭按钮。