在筛选列表中，当标签处于活跃时，需给定不同样式
<template> <div class="category-selector"> <ul class="sort-type"> <li v-for="(item, index) in sortTypeTag" :key="index"> <a rel="external nofollow" 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>