vue active样式显示
html:代码
<ul>
<li @click="current='xxxx'" :class="{active:current=='xxxx'}">休息休息</li>
<li @click="current='xxxx1'" :class="{active:current=='xxxx1'}">休息休息</li>
<li @click="current='xxxx2'" :class="{active:current=='xxxx2'}">休息休息</li>
<li @click="current='xxxx3'" :class="{active:current=='xxxx3'}">休息休息</li>
</ul>
css样式:
.active {
background: rgb(21,149,136);
color: white;
border: 1px solid green;
}
js代码:
export default {
name: '',
data() {
return {
current:'xxxx',
}
},
}
vue active样式显示的更多相关文章
- VUE 动态切换列表active样式
参考VUE官方文档样式绑定 https://cn.vuejs.org/v2/guide/class-and-style.html 需求是动态加载出来了所有菜单列表,点击其中一个li元素改变这个元素的背 ...
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- 移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】
移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26 15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
- vue打包后显示空白正确处理方法
vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 编码问题导致样式显示在IE中不正常
今天在做项目的时候,遇到样式显示不正常的问题,结果是因为用系统自带的notepad编辑器编辑文件时,编码格式被更改了.我们需要在Notepad++中,将编码格式改成Encode inUTF8 with ...
- nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常
nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...
随机推荐
- pip安装超时解决方案
1 安装的后面 用-i接一些国内的镜像,下面这个是清华的,亲测比较快 pip install apache-airflow -i https://pypi.tuna.tsinghua.edu.cn/s ...
- [Abp vNext微服务实践] - 业务开发
前几篇分别介绍了abp vNext微服务框架.开发环境搭建和vue element admin前端框架接入,在vue element admin中实现用户角色管理基本功能后就可以开始进行业务开发了,本 ...
- Caffe---自带工具进行网络结构(xxx.prototxt)可视化
Caffe---自带绘图工具(draw_net.py)绘制网络结构图(xxx.prototxt) 目录: 一,安装依赖库. 二,draw_net.py使用说明. 正文: 一,安装依赖库. 在绘制之前, ...
- Python正则及geometer正则截图讲解
正则表达式 语法: 1 2 3 4 5 6 import re #导入模块名 p = re.compile("^[0-9]") #生成要匹配的正则对象 , ^代表从开头匹 ...
- 百度人脸识别java html5
1.前端thymeleaf+h5 index.html 人脸识别+定位,用的百度sdk <!DOCTYPE html> <html xmlns="http://www ...
- vscode入门记
蒟蒻也是第一次从Dev转过来呢, 因为vsc界面,实用性,美观性,以及稳定性(Dev那注释中的乱码不想吐槽.)都比Dev强,... fzy: _GC: 扶苏: water_lift: ych: 不想做 ...
- CodeForces - 1202F You Are Given Some Letters... (整除分块)
题意:一个字符串包含a个A和b个B,求这个字符串所有可能的循环节长度(末尾可能存在不完整的循环节) 好题,但思路不是很好想. 首先由于循环节长度可以任意取,而循环次数最多只有$O(\sqrt n)$个 ...
- mysql锁定单个表的方法
mysql锁定单个表的方法mysql>lock table userstat read;mysql>unlock tables; 本文来自ChinaUnix博客,如果查看原文请点:http ...
- 一个列表实现__iter__和__next__方法的例子
x = ['厉智','陈培昌','程劲','徐晓冬'].__iter__() #这非得这么写不可,否则无法调用下面的__next__()方法,切记! print(x.__next__()) print ...
- Qt 窗体增加滚动条
//滚动区域 m_ScrollArea = new QScrollArea(parentWidget()); m_ScrollArea->setGeometry(, , , ); //垂直滚动条 ...