老师，您好，帮我看一下这个选项卡功能要怎么实现？

老师：我想要的是以下的效果图：

就是点击可以切换的那种，现在是可以实现，通过以下的代码，但是：

第一，我不知道这样写是不是有问题不简洁

第二，现在想实现下边框的样式也跟着变过去，实现不了

我的代码是这样的，有些乱：

麻烦老师帮助一下，谢谢了

看不穿繁华 2019-11-06

源自：Vue基础详解 1-1 课程简介

收起

3回答

好帮手慕慕子回答被采纳获得+3积分 2019-11-07 09:43:03

同学你好，对于你的疑惑可以参考如下解析

如果你的类名需要动态的去改变，就可以使用class类绑定，如果你的类名是固定不变的，直接写类名就可以
只要你想使用动态绑定类名的方式，前面就必须添加v-bind指令
如果在你在结构搭建的时候，原本标签上已经写好了类名和对应的css样式，那么正常写就可以了，不需要动态改变类名的时候就可以不用class绑定
两者的联系就是最终都是给元素设置样式的， style绑定和class绑定的作用区别如下所示：
（1）style绑定是直接设置行内样式的
（2）class绑定是控制类名的
可以结合两者功能与实际场景需求，如果通过切换类名就可以实现效果的，那么就是用class绑定，如果是简单的直接给元素设置行内样式就可以使用style样式

同学觉得官网看到会用，但是不知道什么时候用，这种感觉老师非常能够理解，这个主要还是因为理解的不够透彻，练习的少，而且结合实际应用场景使用的少。建议：同学可以结合官网的示例以及视频中老师的案例多写一些代码，根据代码实现的效果去帮助自己更好的理解记忆，这样在下一次需要使用的时候才可以更熟练一点哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

收起回答

看不穿繁华提问者 #1

好的，老师，谢谢你，我明白了，还有个问题能否帮我看一下，就是当切换多个选项卡的时候，我这样书写是不是就麻烦了呢，有没有简单的办法，在下一个提完当中呢，谢谢

2019-11-07 11:23:02
好帮手慕慕子回复提问者看不穿繁华 #2

同学你好，在你的新建提问下给出了解答，快去看一下吧https://class.imooc.com/course/qadetail/167769 祝学习愉快~~~

2019-11-07 18:33:18
看不穿繁华提问者回复好帮手慕慕子 #3

好的，谢谢

2019-11-08 08:42:00

好帮手慕慕子 2019-11-06 19:09:18

同学你好，从你贴的这部分代码和你的描述中，已经实现切换效果，那么这样写就是可以的

不是很清楚同学的下边框样式是如何设置的，老师这里给同学提供一个思路

通过一个特殊的类设置下边框样式. 例： .line
动态绑定class类名，然后通过判断type是不是给span设置类名，参考代码

<span :class="[{'line': type === 'one'}, spl, active]" @click="handleOneClick">正常折扣申请</span>
<span :class="[{'line': type === 'two'}, spl, spl1]" @click="handleTwoClick">特殊折扣申请</span>

同学可以结合这个思路自己下去尝试书写一下，如果是对动态绑定类名的规则不熟悉，可以结合vue官网和课程中视频的讲解补习一下这方面的知识

如果还有疑惑，可以新建提问，将你的完整代码直接粘贴过来，便于老师帮助你准确高效的定位与解决问题

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

收起回答

提问者看不穿繁华 #1

老师，我想问一下，咱们什么时候需要用这个class类来绑定呢？vue官网看到是会用，就是不知道什么时候用啊第一，就是不知道什么时候用这个class类绑定第二，就是，所有的class类的绑定前面必须冒号bind来绑定的吗？第三，就是如果要是在搭建结构的时候原本就给标签上存在class然后在css里给好了样式的呢？那怎么办？还用冒号再绑定一个class吗？第四，就是什么时候用style，什么时候用class绑定呢？感觉他们俩好像有交集的地方啊？

2019-11-07 08:08:54