绑定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 ...
随机推荐
- leetcode探索高级算法
C++版 数组和字符串 正文 链表: 正文 树与图: 树: leetcode236. 二叉树的最近公共祖先 递归(先序) leetcode124二叉树最大路径和 递归 图: leetcode 547朋 ...
- UML分类
类型 静态图 行为图 用例图 交互图 ...
- SOA相关资料
http://www.cnblogs.com/mushroom/p/4369032.html
- linux简单命令8---软件包安装
1:使用yum安装,它不能包查询和包校验.它安装的是RPM格式文件.没有yum文件 ---------------------------------------------------------- ...
- 一百二十七:CMS系统之添加轮播图前后台逻辑
后台逻辑 模型 from exts import dbfrom datetime import datetime class BannerModel(db.Model): __tablename__ ...
- python同时执行两个函数
使用两个线程同时执行两个函数, def fun1(): while True: time.sleep(2) print("fun1") def fun2(): while True ...
- 接口测试 dubbo 接口测试
dubbo是阿里巴巴开源的一套rpc方案,以为理念很契合微服务,这几年很火,用户里面不凡京东,当当,去哪儿等大公司.rpc场景 dubbo架构 官网也提供了一个很简单实用的demo来演示dub ...
- 这可能是你少有的能get到测试用例编写精髓的机会!
自动化测试用例的编写是实现项目自动化的核心,合理的用例设计是保证自动化效益和实用性的关键,也直接决定了自动化脚本是否具备可扩展和可维护性.由此,本篇文章主要为大家介绍了测试用例编写的规范和注意事项. ...
- 【AMAD】django-activity-stream
动机 简介 个人评分 动机 为你的django站点生成活动流(类似facebook feed).用户可以在个人feed页面看到订阅的人的活动流. 简介 django-activity-stream1中 ...
- 【VS开发】【C/C++开发】C++参数策略传递内存
参数策略 如果函数的参数是一个指针,不要指望用该指针去动态申请内存.如下: void GetMemory(char *p, int num) { p = (char *)malloc(sizeof(c ...