vue实现选项卡切换--不用ui库

vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页,也就是选项卡,项目需要选项卡中的内容overFLow:auto,但是无论怎么设置,上面的选项都会跟着一起滚动,实在是头疼的很,所以决定,自行解决吧.

效果图:

需求分析

• 选项卡点击切换时选项的背景颜色或字体需要变化
• 选项卡中每个选项的产品数量要根据后端返回数据进行变化
• 点击选项时下面内容要对应发生改变
• 滚动时选项不动,只内容发生滚动

下面就直接上成品代码

初始化的数据:

点击事件:

methods: {
     select(item){
       this.sel = item.id;
     },
 },

定义样式:

可直接复制代码看效果,如有任何疑问,欢迎屏幕下方留言...