vue :class 判断失效问题

nico
  • 36

vue的:class 判断问题,这边做了判断,但是class效果加不上去,刚开始做vue项目,真的很不懂,下面是有问题的代码,只留下了主要的部分,求个大神帮忙看看,蟹蟹蟹蟹

<style scoped>
.show_body dl{border-bottom:1px solid #eee;padding:.2rem 0;width:100%}
.show_body dl:last-child{border-bottom:1px solid #fff}
.show_body dl dd{font-size:.35rem;line-height:.65rem}
.show_body dl dt{padding:.12rem 0}
.show_body dl dt a{display:inline-block;border:1px solid #ccc;font-size:.25rem;padding:.1rem .2rem;margin-right:.15rem;margin-left:.15rem;border-radius:.1rem}
.show_body dl dt a.on{border:1px solid #ff9500;color:#fff;background:#ff9500}
</style>

<template>

<div class="show_body">
    <dl v-for="(specListlist,index) in info">
        <dd>{{specListlist.name}}</dd>
        <dt>
            <a v-for="(list,indexs) in specListlist.normsValues" :class="{on:indexclass[index]==indexs}"  @click="listOnclick(index,indexs,list)">{{list.name}}</a>
        </dt>
    </dl>
</div>

</template>

<script>

export default {

name:'goodsDetail',
data:function(){
      return {
        indexclass:[-1,-1,-1,-1,-1],
        info:[
            {"id": "1", "name": "颜色", "normsKey": 0, "normsValues": [
                {"id": 1, "name": "黑色", "normsKey": "NV0"},
                {"id": 2, "name": "白色", "normsKey": "NV1"}
            ]}, 
            {"id": "2", "name": "尺寸", "normsKey": 0, "normsValues": [
                {"id": null, "name": "S", "normsKey": "NV0"}, 
                {"id": null, "name": "M", "normsKey": "NV1"}, 
                {"id": null, "name": "L", "normsKey": "NV2"}]
            }
        ]
    }
},
methods: {
    listOnclick:function(a,b,c){
        this.indexclass[a]=b;
        console.log(this.indexclass,this.indexclass[a],b);
    
    }
}

}
</script>

这个是我执行后的效果图

试过了
:class="(indexclass[index]==indexs)?'on':''"
:class="{'on':indexclass[index]==indexs}"
都没有效果
这个是在线的代码,https://jsfiddle.net/94dum1gn/

回复
阅读 3.8k
3 个回答
✓ 已被采纳

this.indexclass[a]=b;

改为
this.$set(this.indexclass, a, b);

把 on 加个 '' 包起来 不然on 是个变量

<div class="show_body">
    <dl v-for="(specListlist,index) in info">
        <dd>{{specListlist.name}}</dd>
        <dt>
            <a v-for="(list,indexs) in specListlist.normsValues" :class="{'on':indexclass[index]==indexs}"  @click="listOnclick(index,indexs,list)">{{list.name}}</a>
        </dt>
    </dl>
</div>

class名需要用单引号包起来。

你知道吗?

宣传栏