绑定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 ...
随机推荐
- UiUtils
import android.app.Activity; import android.app.Dialog; import android.content.Context; import andro ...
- JPA,Hibernate,Spring Data JPA之间的关系
什么么是JPA? 全称Java Persistence API(JAVA对象持久化API),可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1 ...
- k8s创建资源的两种方式(5)
一.创建方式分类: 命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1.用 kubectl 命令直接创建,比如: kubectl run httpd-app --image=reg ...
- R语言与概率统计(三) 多元统计分析(上)
> #############6.2一元线性回归分析 > x<-c(0.10,0.11,0.12,0.13,0.14,0.15,0.16,0.17,0.18,0.20,0.21,0. ...
- 转载:深入浅出 Java 8 Lambda 表达式
原文地址:http://viralpatel.net/blogs/Lambda-expressions-java-tutorial/ OneAPM for Java 能够深入到所有 Java 应用内部 ...
- 树莓派-为Ubuntu Mate更换国内源 [转]
更换步骤以root身份打开 /etc/apt/sources.list 将 http://ports.ubuntu.com/ 全部替换为中科大的源 http://mirrors.ustc.edu ...
- Hibernate三种状态:瞬时状态、持久化状态、离线状态
三种状态及相互转化 瞬时状态(transient):刚new出来一个对象,还没有被保存到数据库中 持久化状态(persistent):已经被保存到数据库中或刚从数据库中取得 离线状态(detached ...
- lua学习笔记2--table
table是lua中的一种"数据/代码结构",可以用俩创建不同的"数据类型"lua语言中的数组其实就是table类型 array = {, , , , } pr ...
- 【AMAD】django-formapi -- 一个DJANGO API框架,可使用签名request,可使用form作为API的验证工具
动机 简介 个人评分 动机 如何快速构建API,使用view就行了? 如果快速构建一个可以验证参数的API,使用django-formapi1吧! 简介 class DivisionCall(call ...
- 从零开始的白帽子学习--stage1--常见漏洞类型介绍--part3--不安全的文件上传
Q:什么是文件上传漏洞 A:文件上传功能在web应用系统很常见,比如很多网站注册的时候需要上传头像.上传附件等等.当用户点击上传按钮后,后台会对上传的文件进行判断 比如是否是指定的类型.后缀名.大小等 ...