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/....../. ...
随机推荐
- java 使用POI导出百万级数据
先看结果吧,这只是测试其中有很多因数影响了性能. 表总数为:7千多万,测试导出100万 表字段有17个字段 最终excel大小有60多兆 总耗时:126165毫秒 差不多2分多钟 其核心简单来说就是分 ...
- Django—logging配置
我写Django项目常用的logging配置. # Django的日志配置项 BASE_LOG_DIR = os.path.join(BASE_DIR, "log") LOGGIN ...
- 简单介绍 Java 构造器
导读 构造器是编程的强大组件.使用它们来释放 Java 的全部潜力. 在开源.跨平台编程领域,Java 无疑(?)是无可争议的重量级语言.尽管有许多伟大的跨平台框架,但很少有像 Java 那样统一和直 ...
- 2.02_Python网络爬虫分类及其原理
一:通用爬虫和聚焦爬虫 根据使用场景,网络爬虫可分为 通用爬虫 和 聚焦爬虫 两种. 通用爬虫 通用网络爬虫是捜索引擎抓取系统(Baidu.Google.Yahoo等)的重要组成部分.主要目的是将互联 ...
- NOI2018 你的名字——SAM+线段树合并
题目链接在这里洛谷/LOJ 题目大意 有一个串\(S\),每次询问给你一个串\(T\),两个数\(L\)和\(R\),问你\(T\)有多少个本质不同的子串不是\(S[L,R]\)的子串 SOLUTIO ...
- CF487E Tourists[圆方树+树剖(线段树套set)]
做这题的时候有点怂..基本已经想到正解了..结果感觉做法有点假,还是看了正解题解.. 首先提到简单路径上经过的点,就想到了一个关于点双的结论:两点间简单路径上所有可能经过的点的并等于路径上所有点所在点 ...
- 关于github报错 ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository.
今天上午写demo的时候,突然pull不下代码了,报了一下这样情况的错误: 看了一下代码,怀疑是网路错误,因为在这以前一切都正常的,然后将代码复制搜索了一番,解决办法有很多什么配置config啦,gi ...
- Java8-Stream-No.05
import java.util.Arrays; import java.util.List; import java.util.function.Supplier; import java.util ...
- springboot2.0入门(三)----定义编程风格+jackjson使用+postMan测试
一.RESTFul风格API 1.优点: )看Url就知道要什么资源 )看http method就知道针对资源干什么 )看http status code就知道结果如何 HTTP方法体现对资源的操作: ...
- 简单理解yii事件
https://blog.csdn.net/qq43599939/article/details/80363827 通过观察者来理解yii事件 测试 class TestController ext ...