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


Posted in Javascript onAugust 19, 2020

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

1.效果

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

2.所有代码

<template>
 <div class="now-time">
 <div class="timebox">
 <a href="#" v-for="(item,index) in nowTime" v-on:click="addClass(index)"
 v-bind:class="{ bgColors:index==current}">
 <p>{{item.time}}</p>
 <p>{{item.start}}</p>
 </a>
 </div>
 </div>
 
 
</template>
 
<script>
 export default {
 name: "Nowtime",
 methods: {
 addClass:function(index){
 this.current=index;
 }
 },
 mounted() {
 
 },
 data(){
 return{
 current:0,
 nowTime:[
 {
 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:"未开抢"
 },
 ],
 }
 }
 }
</script>
 
<style scoped>
.now-time{
 width: 100%;
 height: .8rem;
 background: #282832;
 display: flex;
 overflow-x:scroll;
}
.timebox{
 width: 100%;
 height: .8rem;
 display: flex;
 background: #282832;
}
 .now-time a{
 display: flex;
 flex-direction: column;
 width: 1.35rem;
 height: .79rem;
 align-items: center;
 flex-shrink: 0;
 }
.now-time a p:first-child{
 font-size: .23rem;
 color: white;
 font-weight: bold;
}
.now-time a p:last-child{
 font-size: .16rem;
 color: white;
}
.timebox .bgColors{
 background: #ff5700;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
js的2种继承方式详解
Mar 04 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
原生js实现each方法实例代码详解
May 27 #Javascript
深入学习JavaScript中的bom
May 27 #Javascript
Vue实现根据hash高亮选项卡
May 27 #Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 #Javascript
Vue使用localStorage存储数据的方法
May 27 #Javascript
了解javascript中的Dom操作
May 27 #Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 #Javascript
You might like
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP中的self关键字详解
2019/06/23 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
Python使用django搭建web开发环境
2017/06/09 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python如何求100以内的素数
2020/05/27 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python判断正负数方式
2020/06/03 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python 如何停止一个死循环的线程
2020/11/24 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
自我鉴定书面格式
2014/01/13 职场文书
城市创卫标语
2014/06/17 职场文书
庆七一主持词
2015/06/29 职场文书
中秋晚会致辞
2015/07/31 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
八年级作文之感恩
2019/11/22 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis