绑定css样式,点击高亮
<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样式,点击高亮的更多相关文章
- Vue 框架-05-动态绑定 css 样式
Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...
- 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
- Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...
- 移动WEBAPP开发常规CSS样式总结
我所使用到的HTML页面标签: Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 :详细说明我就不 ...
- PC端和移动APP端CSS样式初始化
CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- outline轮廓线在不同CSS样式下的表现
outline轮廓线在不同CSS样式下的表现 CSS 去除浏览器默认 轮廓外框 在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色) ...
- 【03】全局 CSS 样式
全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...
- cesium 3dtiles模型单体化点击高亮效果
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. c ...
随机推荐
- leetcode16 最接近的三数之和
做了几周的hard之后,这道题居然轻易就解出来了,稍微debug了一下就ac了,算是有了一丢丢提高把: 思路 这道题因为和三数之和很像,所以充分利用双指针的思想:先排序,然后再固定一个数i,i取值从[ ...
- Linux(CentOS / RHEL 7) 防火墙
CentOS / RHEL 7 防火墙 Table of Contents 1. 简述 2. 常用基本操作 2.1. 查看防火墙状态 2.2. 开启防火墙 2.3. 关闭防火墙 2.4. 开机自动启动 ...
- 06 MySQL之索引
01-索引 1.索引是对数据库表中一列或多列的值进行排序的一种数据结构,使用索引可提高数据库中特定数据的查询速度. 2.索引是一个单独的.存储在磁盘上的数据库结构,包含对数据表里所有记录的引用指针. ...
- delphi设置鼠标图形
//Screen.Cursor := crHourGlass;//忙 //Screen.Cursor := crDefault;//不忙时
- mybatis低版本jsr310(LocalDateTime,LocalDate等) Joda Time支持
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybati ...
- slice详解
- C#中?的相关使用
C#中?的相关使用 今天看了几篇博客,学习了一下与?相关的使用,大致分为一下几种: 1. 可空类型 看标题就能够很好的理解这个概念:可以为空的类型.而在C#中可以为空也就是null的类型,都是引用类型 ...
- 【Abode Air程序开发】移动设备、桌面和浏览器应用程序开发的差异
移动设备.桌面和浏览器应用程序开发的差异 在移动设备应用程序中使用 Spark 和 MX 组件的限制 移动设备应用程序在性能方面的注意事项 浏览器 将应用程序部署为 SWF 文件,以用于在浏览器中运 ...
- 内存块是一种数据结构,内核对象&句柄
内核对象&句柄 目录 1 内核对象的概念 2 内核对象的使用计数 3 句柄 4 句柄表 项目工程代码中设计句柄的使用,一时不知句柄是何物,通过查阅自学之后,对句柄及其使用有一个初步的了解. ...
- Java-Redis 热部署问题
项目请求时报错: java.lang.ClassCastException: cn.xingaohbd.seckil.model.User cannot be cast to cn.xingaohbd ...