鍍金池/ 問答/HTML/ vue :class 判斷失效問題

vue :class 判斷失效問題

vue的:class 判斷問題，這邊做了判斷，但是class效果加不上去，剛開始做vue項(xiàng)目，真的很不懂，下面是有問題的代碼，只留下了主要的部分，求個(gè)大神幫忙看看，蟹蟹蟹蟹

<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>

這個(gè)是我執(zhí)行后的效果圖

試過了
:class="(indexclass[index]==indexs)?'on':''"
:class="{'on':indexclass[index]==indexs}"
都沒有效果
這個(gè)是在線的代碼，https://jsfiddle.net/94dum1gn/

回答
編輯回答
失魂人

把 on 加個(gè) '' 包起來 不然on 是個(gè)變量

2017年7月1日 10:26
編輯回答
涼汐

把

this.indexclass[a]=b;

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

2017年6月13日 12:28
編輯回答
魚梓
<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名需要用單引號包起來。

2017年1月19日 02:55