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实现连续滚动字幕效果的方法
Jul 07 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
js前端图片加载异常兜底方案
Jun 21 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存储过程调用实例代码
2013/02/03 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
vuex 的简单使用
2018/03/22 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python读取图片属性信息的实现方法
2016/09/11 Python
pip命令无法使用的解决方法
2018/06/12 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python异常处理try except过程解析
2020/02/03 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
如何掌握自荐信格式呢
2013/11/19 职场文书
行政专员的岗位职责
2014/03/10 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
房产公证委托书范本
2014/09/20 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
合同审查法律意见书
2015/06/04 职场文书
给学校的建议书400字
2015/09/14 职场文书