Vue动态绑定class实现选中标签样式

大家好，欢迎来到IT知识分享网。

设置选中标签样式

在筛选列表中，当标签处于活跃时，需给定不同样式

<template>
  <div class="category-selector">
    <ul class="sort-type">
      <li v-for="(item, index) in sortTypeTag" :key="index">
        <a href="javascript:void(0);" @click="changeSortType(item.id, index)" :class="{ active: sortIsActive == index }">
          {
  
  { item.name }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
// 事件总线，组件内通信，用于处理当电影分类组件中选项改变时，在电影列表组件内改变对应参数调用后台接口，在这里可以不用管
import { EventBus } from "../../../event-bus"
  
export defalut {
  data() {
		return {
      sortTypeTag: [
        { name: "推时间", id: 1 },
        { name: "推评分", id: 2 },
        { name: "喜欢数", id: 3 },
        { name: "新上线", id: 4 }
      ],
      
      // 默认选中第一个标签，因为第一个标签的index = 0，所以此时第一个标签的sortIsActive === index
      sortIsActive: 0,
    },
      
    methods: {
      changeSortType(id, index) {
        this.sortType = id;
        EventBus.$emit("getMovie", this.sortType, this.regionId, this.type, this.movieDate, this.watchType);
        // 关键，在这里将sortIsActive改为各标签对应的index值，实现动态改变class
        this.sortIsActive = index;
      },      
    }
  }
}
</script>

<style scoped>
ul>li>a {
  height: 2rem;
  line-height: 2rem;
  padding: 0.8rem 1rem;
}

ul>li>a:link {
	font-size: 1rem;
	color: #707070;
}
 
ul>li>a:hover {
	color: #ed9d36;
}

/* 处于活跃状态的样式 */
ul>li>.active {
  border-radius: 45%;
	background-color: #f4f4f4;
  color: #ed9d36 !important;
}
</style>