vue 切换选中样式更换图标

卡片是循环出来的

 <div
v-for="(item,index) in incomeCardList"
:key="index"
:class="{active : active == item.KPI_NAME}"
@click="selected(item.KPI_NAME,item.KPI_CODE)"
class="indexContent"
>
<a-row type="flex" justify="space-around" align="middle">
<a-col class="widthL" v-if="index==0">
<i class="trophy-czsr"></i>
<i class="trophy-czsr_pr"></i>
</a-col>
<a-col class="widthL" v-else-if="index==1">
<i class="trophy-yhjz"></i>
<i class="trophy-yhjz_pr"></i>
</a-col>
<a-col class="widthL" v-else-if="index==2">
<i class="trophy-srjz"></i>
<i class="trophy-srjz_pr"></i>
</a-col>
<a-col class="widthR">
<a-row>
<div class="subValue">{{ item.value }} {{ item.unit }}</div>
<div class="subName">{{ item.KPI_NAME }}</div>
</a-row>
</a-col>
</a-row>
</div>
</div>

例如：第一个卡片
未选中这个卡片图标是

    <i class="trophy-czsr_pr"></i>

选中这个卡片图标是

    <i class="trophy-czsr_pr"></i>

就是样式为当前样式名加_pr
用v-if=!showIcon 方法很容易导致其他卡片图标跟着换，请大神指点下，如何在循环情况下来判断选中更换图标。

回答

观察到你的卡片选中的时候背景颜色会变化，那么选中图标那里也是一样的逻辑。判断当前的active来显示图标既可以了吧，例如：

//未选中这个卡片图标是
<i v-show="!active == item.KPI_NAME" class="trophy-czsr_pr"></i>
//选中这个卡片图标是
<i v-show="active == item.KPI_NAME" class="trophy-czsr_pr"></i>

思路大概是这样子，如果效果不对，你再调整下吧

你不是有个选中状态active么，也用这个去判断就行了，图标也是这个选中状态才会需要加_pr

你这不是有写index判断了，`
selected（index）{

this.nowIndex=index

}

v-if="nowIndex==index"

按照你的写法

          <a-col class="widthL" v-if="index==0">
            <i :class="index==0?'trophy-czsr':'trophy-czsr_pr'"></i>
          </a-col>

以上是 vue 切换选中样式更换图标 的全部内容， 来源链接： utcz.com/a/42232.html

回到顶部