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

// html 


       {checkedSpan: active === ''}">全部
       for="(author,index) in pusherList" :key="index" :class="{checkedSpan: active === author.name}" @click="choosePusher(author)">{{author.name}} 


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

// 它的核心点： 

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

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

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

// 效果图：

 

 

转载于:https://www.cnblogs.com/panax/p/10953805.html