Vue中多个tab页有自己的各自背景颜色怎么实现点击变化

Question

 <div class="coursehead clear">
           //这里是背景的     <div class="courseitem" :class="{active[i]:i==di}" v-for='(v,i) in name' @click='handletitle(i)'>
                    <span :class='zi[i]'> {{v}}</span> //这里是字体的显示部分
                    <div class="yy"></div>
                </div>
            </div>

现在我能做的是 只能一种背景相互切换，求多个背景颜色的切换！谢谢！

Answer 1

参考这一章：Class 与 Style 绑定

方法：根据选中状态动态设置 class 或者 style。

CodePen 示例：https://codepen.io/jamesfancy...

基本思路：

1. 根据选中状态设置 active类，然后在 CSS 中设置 .active 下的各种固定样式，比如字体颜色（白色）等
2. 根据选中状态设置 style，动态改变背景色。