vue实现标签选中效果
实现标签选中效果的方法
在Vue中实现标签选中效果可以通过多种方式完成，常见的方法包括使用v-model绑定数据、动态类绑定或条件渲染。以下是几种实现方案：
使用v-model绑定单选/多选
对于单选效果，可以使用v-model绑定到同一个变量，结合radio或自定义样式实现选中状态：
<template>
<div>
<label v-for="tag in tags" :key="tag.id">
<input type="radio" v-model="selectedTag" :value="tag.id" hidden>
<span :class="{ 'active': selectedTag === tag.id }">{{ tag.name }}</span>
</label>
</div>
</template>
<script>
export default {
data() {
return {
tags: [{ id: 1, name: '标签1' }, { id: 2, name: '标签2' }],
selectedTag: null
}
}
}
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>动态类绑定实现多选
通过数组记录选中的标签，使用:class动态切换样式：
<template>
<div>
<span
v-for="tag in tags"
:key="tag.id"
@click="toggleTag(tag.id)"
:class="{ 'active': selectedTags.includes(tag.id) }"
>
{{ tag.name }}
</span>
</div>
</template>
<script>
export default {
data() {
return {
tags: [{ id: 1, name: '标签1' }, { id: 2, name: '标签2' }],
selectedTags: []
}
},
methods: {
toggleTag(id) {
const index = this.selectedTags.indexOf(id);
if (index > -1) {
this.selectedTags.splice(index, 1);
} else {
this.selectedTags.push(id);
}
}
}
}
</script>使用计算属性优化
对于复杂场景，可以通过计算属性派生选中状态：
<template>
<div>
<span
v-for="tag in tags"
:key="tag.id"
@click="selectedTag = tag.id"
:class="isActive(tag.id)"
>
{{ tag.name }}
</span>
</div>
</template>
<script>
export default {
data() {
return {
tags: [{ id: 1, name: '标签1' }, { id: 2, name: '标签2' }],
selectedTag: null
}
},
methods: {
isActive(id) {
return this.selectedTag === id ? 'active' : '';
}
}
}
</script>样式增强技巧
-
过渡动画：添加CSS过渡效果使选中更平滑
span { transition: all 0.3s ease; } -
禁用状态：通过条件禁用某些标签
<span :class="{ 'disabled': tag.disabled }" @click="!tag.disabled && selectTag(tag)"> -
自定义主题色：通过CSS变量动态修改选中颜色
:root { --active-color: #42b983; } .active { background-color: var(--active-color); }
以上方法可根据实际需求组合使用，Vue的响应式特性使得状态与UI的同步变得简单高效。
