怎么在vue-cli中利用 :class去做一个底层背景或者文字的点击切换

// html 

<div class="pusherLists" :class="{hidden: isHidden}">
       <span @click="allPusher" :class="{checkedSpan: active === ''}">全部</span>
       <span v-for="(author,index) in pusherList" :key="index" :class="{checkedSpan: active === author.name}" @click="choosePusher(author)">{{author.name}} </span>
</div>

此时的div 和span 可以换成 row ,col ,利用flex 进行布局，便于美观居中。这里不做详解。

// 它的核心点：

:class="{checkedSpan: active === ''}"
:class="{checkedSpan: active === author.name}"

data(){
   active:''     // 默认全部
}

class 的动态变量设置，前面是一个class类名，如果后面的条件成立，则添加这个类名，否则不添加。

// 效果图：