首页 新闻 会员 周边

这种标签效果怎么做的?(vue)

0
[已解决问题] 解决于 2022-03-13 07:21

echomay的主页 echomay | 菜鸟二级 | 园豆:217
提问于:2022-03-01 15:43
< >
分享
最佳答案
0

也可以代码动态设定 class

奖励园豆:5
人间春风意 | 老鸟四级 |园豆:2335 | 2022-03-01 16:12

可以说得具体一点吗?我就是用的这种方法,但是设置错了,点一个结果全亮了。我用的v-for写的标签。

echomay | 园豆:217 (菜鸟二级) | 2022-03-03 17:30

@echomay: 动态设定class出问题了?那就是判断条件出问题了,可以贴一下代码
或者看这种也行,或者 ref设定class也行,方法很多种
https://www.cnblogs.com/zhuchenglin/p/9836397.html

人间春风意 | 园豆:2335 (老鸟四级) | 2022-03-03 18:27

@人间春风意:谢谢您的解答!这是我写的,但就是一点就全都亮了,应该怎么改才对呢?

div class="theme-tag a1">
<span class="Title f1">题材</span>
<span v-for="theme in themes" class="fff" :class="isTrue==1?'selected':''" @click="choose(0)">
{{theme.name}}
</span>
</div>

data(){
return {
isTrue:0,
themes:[{
name:'冒险',
index:'',
},{
name:'热血',
index:'',
}]
}}

choose(index){
if(this.isTrue== index){
this.isTrue = 1
}else {
this.isTrue = index
}
}

echomay | 园豆:217 (菜鸟二级) | 2022-03-03 21:13

@echomay: 你绑定的是一个值啊,一直是一个值,当然会一起变

人间春风意 | 园豆:2335 (老鸟四级) | 2022-03-03 21:42

@echomay: 比如点击事件时,修改对应的themes[index]的某一个属性值,比如设定为布尔,点击修改为true或false,:class绑定的值为theme的数值是否为true

人间春风意 | 园豆:2335 (老鸟四级) | 2022-03-03 21:45

@人间春风意: 好的,谢谢谢谢!解决好了~

echomay | 园豆:217 (菜鸟二级) | 2022-03-04 10:14
其他回答(1)
0

CSS 类样式控制选中和未选中两种状态的样式。

lanserdi | 园豆:254 (菜鸟二级) | 2022-03-01 16:06
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册