宝哥软件园

Vue实现导航栏点击当前标签变色功能

编辑:宝哥软件园 来源:互联网 时间:2021-08-23

本文实例为大家分享了某视频剪辑软件实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下

1.效果

2.所有代码

模板div class=' now-time ' div class=' time box ' a href=' # ' rel=' external no follow ' v-for='(item,index)in now time ' v-: click=' addCLaSS(index)' v-bind : class=' { bgcolors 3360 index==current } ' p { { item。time } }/p p { { item。start } }/p/a/div/div/模板脚本导出默认值{ name: ' Nowtime} },mounted() { },data(){ return{ current:0,now time :[{ time : ' 9:00 ',start: '已开抢},{ time:'10:00 ',start: '已开抢},{ time:'11:00 ',start: '已开抢},{ time:'12:00 ',start: '已开抢},{ time:'13:00 ',start: '未开抢},{ time:'14:00 ',start: '未开抢},{ time:'15:00 ',start: '未开抢}、]、} } }/脚本样式范围为。现在时间{宽度: 100%;高度:8雷姆;背景技术;display : flexoverflow-x : croll;}.时间框{宽度: 100%;高度:8雷姆;显示: flex背景技术;} .实时a { display : flex flex-direction :柱;宽度: 1.35雷姆;高度:79雷姆;align-items:居中;柔缩: 0;}.现在时间尺寸:第一个孩子{ font-size :23雷姆;颜色:白色;字体粗细:粗体;}.现在时间a p :最后一个孩子{ font-size :16雷姆;颜色:白色;}.时间盒背景: # ff 5700}/样式以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+