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中“+=”的应用
Feb 02 Javascript
JavaScript 基础问答三
Dec 03 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
TypeScript中的方法重载详解
Apr 12 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 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
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js对文章内容进行分页示例代码
2014/03/05 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python 通配符删除文件的实例
2018/04/24 Python
解读python如何实现决策树算法
2018/10/11 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
厂长岗位职责
2014/02/19 职场文书
广告设计应届生求职信
2014/03/01 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
优质护理心得体会
2016/01/22 职场文书