Vue2.0实现li点击动态切换样式

转载自： https://www.cnblogs.com/sxz2008/p/7048671.html.

template页面

<ul>
<li v-for="(item,index) in fileTypeOptions" :key="index" @click="changeEvent(item,index)" :class="{'active':item.active,'unactive':!item.active}">
   <el-image
     style="width:40px;height: 40px;"
     id="image"
     :src="item.url"
     fit="contain"></el-image>
   <span>{{item.dictLabel}}</span>
 </li>
</ul>

js

changeEvent: function (item,index) {
  this.$nextTick(function () {
    this.fileTypeOptions.forEach(function (item) {
      Vue.set(item,'active',false);
    });
    Vue.set(item,'active',true);
  });
  this.fileType = item.dictValue;
}

style

.active{
  background-color: rgba(217, 237, 255, 1);
  font-size: 16px;
}
.unactive{
  font-size: 14px;
}