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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
关于php循环跳出的问题
2013/07/01 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
卫生系统先进事迹
2014/05/13 职场文书
消防安全宣传标语
2014/06/07 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书