vue tag菜单样式选中。vue tag菜单只有一种选中样式的样式选中。vue tag 类型选择,分类选择 电脑版发表于:2023/1/31 11:31 ![](https://img.tnblog.net/arcimg/xiuxin/46925d00680543d8b067b8263b81bb01.png) **html** ``` <div v-for="(item,index) in data"> <span :class="active==item.type?'active':'Classification'" @click="oncheck(item.type)"> {{item.type}}</span> </div> ``` 利用三目运算符进行了判断,如果当前点击的正好是这项,那么这项的样式就设置中选中的样式active,或者就是没有选中的样式Classification **js:** ``` data() { return { data: [{ type: '66P' }, { type: '760P' }, { type: '(含16G系统优盘)660P' }, { type: '(含16G系统优化盘)760P' }], active:'' } }, methods: { oncheck(name){ console.log(name) this.active=name } } ``` **css:** ``` .active{ float: left; margin-left: 10px; padding: 10px; background: #efc531; margin-bottom: 10px; border-radius: 4px; font-size: 14px; } .Classification { float: left; margin-left: 10px; padding: 10px; background: #f7f7f7; margin-bottom: 10px; border-radius: 4px; font-size: 14px; } ```