vue中的v-for中对第一个元素的class设定不相同的问题，其实就是加一个active

Question

我的代码是：

<template v-for="(tab,index) in tabs">

    <a v-bind:href="'#'+tab.SColumnKey" class="button tab-link  active" v-bind:class="[index==0?'button tab-link  active':'button tab-link  ']"  v-on:click="changeTab(tab.SColumnKey);"> {{ tab.SColumnName }}</a>
</template>
                                          

但出错，报什么:a[index出错....

Answer 1

http://cn.vuejs.org/v2/guide/...绑定-HTML-Class

这里写法就错了呀

v-bind:class="[index==0?'button tab-link  active':'button tab-link  ']"

 v-bind:class="{'active':index==0}" class="button tab-link"

Answer 2

 <a v-bind:href="'#'+tab.SColumnKey" class="button tab-link  active" v-bind:class="[index==0? active:'',button,tab-link ]"  v-on:click="changeTab(tab.SColumnKey);"> {{ tab.SColumnName }}</a>

//这样写试试

Answer 3

 <a :href="'#'+tab.SColumnKey" class="button tab-link  active" :class="{'active' : index == 0 }" @click="changeTab(tab.SColumnKey);"> {{ tab.SColumnName }}</a>

Answer 4

[(index==0)?'button tab-link active':'button tab-link']

Answer 5

没那么复杂，这么写就可以了：

<template v-for="(tab,index) in tabs">
    <a class="button tab-link" :class="{index==0 ? 'active':''}"> {{ tab.SColumnName }}</a>
</template>