<div class="flex-lay" style="color:#999">
<div bindtap="changeType(1)" class="nav" :class="{'nav-active' : active == 1}">日报</div>
<div bindtap="changeType(2)" class="nav" :class="{'nav-active' : active == 2}">周报</div>
<div bindtap="changeType(3)" class="nav" :class="{'nav-active' : active == 3}">月报</div>
</div>
data: {
active: 1
},
methods: {
changeType(type){
this.active = type
},
}
.nav{
padding:20rpx 0;
}
.nav-active{
border-bottom:4rpx solid #333;
color:#333;
}

绑定css样式,点击高亮的更多相关文章

  1. Vue 框架-05-动态绑定 css 样式

    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...

  2. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  3. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  4. 移动WEBAPP开发常规CSS样式总结

    我所使用到的HTML页面标签: Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 :详细说明我就不 ...

  5. PC端和移动APP端CSS样式初始化

    CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...

  6. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  7. outline轮廓线在不同CSS样式下的表现

    outline轮廓线在不同CSS样式下的表现 CSS 去除浏览器默认 轮廓外框 在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色) ...

  8. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  9. cesium 3dtiles模型单体化点击高亮效果

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. c ...

随机推荐

  1. [go]匿名结构体

    匿名结构体声明 使用匿名结构体 声明并初始化

  2. MYSQL通过循环向数据库中插入数据

    BEGINdeclare i int default 305;declare a char(255);REPEATset a=concat("测试机构00",cast(i as c ...

  3. 启动eclipse导致Tomcat的配置文件重置

    转: 启动eclipse导致Tomcat的配置文件重置 导入一个项目,需要在Tomcat的配置文件中配置JNDI数据源,需要修改Tomcat下的server.xml文件.但是当我们修改完后重启Tomc ...

  4. 每个开发者都应该知道的SOLID原则

    每个开发者都应该知道的SOLID原则 单一职责原则(SRP) 它为什么违反了 SRP? 这种设计将来会带来什么问题? 开闭原则(OCP) 如何使它(AnimalSound)符合 OCP? 里氏替换原则 ...

  5. 利用Oracle定时任务重置序列

    业务需求是:二元化编号规则:RYH+年月+001(开始),按月计算,每月1号重置为001 数据库中已有序列和函数如下: 解决方法:采用Oracle定时任务,每月1号重置该序列从1开始增长,SQL如下: ...

  6. bash-1 初始化CentOS系统的初始化脚本

    初始化CentOS系统的初始化脚本 #!/bin/bash # #******************************************************************* ...

  7. git配置过程中fatal:拒绝合并无关的历史

    首先将远程仓库和本地仓库关联起来: git branch --set-upstream-to=origin/master master 然后使用git pull整合远程仓库和本地仓库, git pul ...

  8. 【CodeForces - 939A】Love Triangle(模拟)

    Love Triangle Descriptions: 正如你所知道的,没有男性飞机也没有女性飞机.然而,地球上的每一个平面都喜欢另一个平面.地球上有n个平面,编号从1到n,编号i的平面喜欢编号fi的 ...

  9. 【052-week 预习周】学习总结

    目录 学习手册 学习理念 学员精选 课前准备 概览 数据结构思维导图 算法思维导图 学习手册 学习理念 让优秀的人一起学习 师傅领进门,修行靠个人 学员精选 稻盛和夫"六项精进" ...

  10. PYTHON 100days学习笔记007-1:python数据类型补充(1)

    目录 day007:python数据类型补充(1) 1.数字Number 1.1 Python 数字类型转换 1.2 Python 数字运算 1.3 数学函数 1.4 随机数函数 1.5 三角函数 1 ...