绑定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 ...
随机推荐
- leetcode25 K 个一组翻转链表
这道题关于链表的操作,中间指针操作略复杂. /** * Definition for singly-linked list. * struct ListNode { * int val; * List ...
- SoundPool 播放短声音
SoundPool 最大只能申请1M的内存空间,只能用一些很短的声音片段,而不是用它来播放歌曲或者做游戏背景音乐. 使用 SoundPool 播放短声音实现步骤如下: // 创建SoundPool实例 ...
- 使用Pull解析器生成XML文件
有些时候,我们需要生成一个XML文件,生成XML文件的方法有很多,如:可以只使用一个StringBuilder组拼XML内容,然后把内容写入到文件中:或者使用DOM API生成XML文件,或者也可以使 ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_6-04 自定义Zuul过滤器实现登录
笔记 4.自定义Zuul过滤器实现登录鉴权实战 简介:自定义Zuul过滤器实现登录鉴权实战 1.新建一个filter包 2.新建一个类,实现ZuulFilter,重写里面的方法 3.在类顶部加 ...
- 一百二十四:CMS系统之首页导航条和代码抽离
模板抽离 由于前后台的模板有些需要的元素如,js,css是相同的,这里抽离出来做base模板 {% from "common/_macros.html" import static ...
- CentOS8 缺少 libglade2 安装包的回避方法
某些gtk2应用程序需要libglade2安装包,但不知为何CentOS的yum仓库里没有此包, 经测试,可手动安装CentOS7的rpm包安装解决. 更新:使用下面一行即可.sudo yum ins ...
- 树莓派-Ubuntu Mate开启ssh服务
1. 运行 apt search openssh-server 查看是否安装ssh服务. 2. 如已安装,运行 sudo dpkg-reconfigure openssh-server 重新配置shh ...
- java中,有关移位运算符的有关讨论
java中有三种移位运算符 << : 左移运算符,num << 1,相当于num乘以2 >> : 右移运算符,num >& ...
- kubeadm安装集群系列-1.基础服务安装
基础服务 本文基于centos7.5部署 规划 10.8.28.200 master-VIP 10.8.31.84 k8s-test-master-1 10.8.152.149 k8s-test-ma ...
- 爬虫学习笔记之为什么要设置超时时间,怎么设置(使用selenium)
一个程序没有设置超时时间,就可以说是一段有缺陷的代码. 读取超时指的就是客户端等待服务器发送请求的时间.(特定地,它指的是客户端要等待服务器发送字节之间的时间.在 99.9% 的情况下这指的是服务器发 ...