vue.js 2.0 通过v-for遍历下，点击添加class ,之前点击过的class不取消（不是单选，类似多选）

Question

 <a  :href="img.src" class="block"  v-bind:style="{backgroundImage: 'url(' + img.url + ')'}"  v-for="(img,index) in imgS" v-if="sShow(img.label)&&sShow2(img.type)">
      <div class="tx">{{img.name }}</div>
      <div class="xq">
           <div>
                <span class="fl">{{img.type}}</span>
                <span class="fl n">1张</span>
           </div>
     </div>
    <span class="sc" v-on:click="sC(img.url,img.type,index)" :class="i==index?'a':true"></span>
</a>

这种只能给当前点击的添加class，但是之前点击的取消掉了，怎么才能之前点过的也有class呢？

Answer 1

tempalte 部分

@click="handler(index)"class='{className:classItem[index]}'

script部分

data(){ classItem:''}

hanlder(index){this.$set(this.classItem,index,true) }

Answer 2

我的建议是，用一个变量，保存当前选中了哪些数据项，点击等操作时更新这个变量。而元素根据这个变量绑定 class 或者样式。而不是像 jQ 那样，在点击事件里直接添加或者删除样式。这也是 vue 这类框架的优势--数据绑定，数据驱动视图。