vue实现列表的下面可点击的小标签
时间: 2024-02-16 21:03:58 浏览: 42
你可以使用 Vue 的组件和路由来实现下面可点击的小标签,具体步骤如下:
1. 创建一个组件,用于展示小标签。例如:
```html
<template>
<div>
<router-link :to="link">{{ label }}</router-link>
</div>
</template>
<script>
export default {
props: {
label: String,
link: String
}
}
</script>
```
2. 在需要展示小标签的地方,使用 v-for 指令来循环展示组件。例如:
```html
<template>
<div>
<ul>
<li v-for="tag in tags" :key="tag.id">
<Tag label="tag.name" :link="`/tags/${tag.id}`" />
</li>
</ul>
</div>
</template>
<script>
import Tag from '@/components/Tag'
export default {
components: {
Tag
},
data() {
return {
tags: [
{ id: 1, name: '标签1' },
{ id: 2, name: '标签2' },
{ id: 3, name: '标签3' }
]
}
}
}
</script>
```
这样就可以在列表下面展示可点击的小标签了。