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样式显示的更多相关文章

  1. VUE 动态切换列表active样式

    参考VUE官方文档样式绑定 https://cn.vuejs.org/v2/guide/class-and-style.html 需求是动态加载出来了所有菜单列表,点击其中一个li元素改变这个元素的背 ...

  2. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  3. 10.Vue.js 样式绑定

    Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...

  4. 移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  5. vue 绑定样式的几种方式

    vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...

  6. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

  7. vue.js样式绑定

    vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...

  8. 编码问题导致样式显示在IE中不正常

    今天在做项目的时候,遇到样式显示不正常的问题,结果是因为用系统自带的notepad编辑器编辑文件时,编码格式被更改了.我们需要在Notepad++中,将编码格式改成Encode inUTF8 with ...

  9. nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常

    nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...

随机推荐

  1. 第六章、Cookies和Session

    目录 第六章.Cookies和Session 一.来源 二.cookie工作原理 工作原理: 三.session的工作原理 工作原理: 四.如何操作cookie 服务端常见的cookie操作 五.案例 ...

  2. web应用原理之——会话

    会话是大家开发Java EE Web应用的常用技术,那么会话是什么,会话的用途还有工作原理又是什么,下面就简单说一说. 什么是会话,在web应用中,作为客户端的浏览器,通过请求/响应这种模式访问同一个 ...

  3. 前端基础(七):Toastr(弹出框)

    Toastr 简介 jquery toastr 一款轻量级的通知提示框插件. 网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差. 所以一般通过自定义提示框来实现弹窗提示信息,而jq ...

  4. tensorflow保存数据为.pb格式和加载pb文件

    转自:https://blog.csdn.net/u014264373/article/details/79943389 https://blog.csdn.net/fu6543210/article ...

  5. Linux系统从新手到运维老鸟学习指南

    Linux是在1990年底到1991年由芬兰大学的学生LinusTorvalds利用Minix操作系统作为开发平台编写了内核,目前由世界各地的爱好者共同开发和维护的与UNIX兼容的操作系统,也是自由和 ...

  6. ping不通github

    Linux 下 host文件在 /etc/hosts Windows下 host文件在C:\Windows\System32\drivers\etc 在host文件的最后面加上: Linux sudo ...

  7. PAT Basic 1059 C语言竞赛 (20 分)

    C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份“神秘大奖”(比如很巨大的一本学生研究论文集……). 1.排名为素数的学生将 ...

  8. mysql—数据库优化——如何选择合适的索引

    索引的分类: 普通索引: 唯一索引: 主键索引:特殊的唯一索引,唯一且不能有null值: 全文索引:全文索引用来对表中的文本域(char, varchar, text)进行索引 全文索引针对myisa ...

  9. CF827D Best Edge Weight[最小生成树+树剖/LCT/(可并堆/set启发式合并+倍增)]

    题意:一张图求每条边边权最多改成多少可以让所有MST都包含这条边. 这题还是要考察Kruskal的贪心过程. 先跑一棵MST出来.然后考虑每条边. 如果他是非树边,要让他Kruskal的时候被选入,必 ...

  10. appium+python 【Mac】UI自动化测试封装框架介绍 <二>---脚本编写(单设备)

    1.单设备的执行很简单,平时可多见的是直接在config中进行配置并进行运行即可.如下: # coding=UTF- ''' Created on // @author: SYW ''' from T ...