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. ASE19团队项目alpha阶段model组 scrum11 记录

    本次会议于11月15日,19时整在微软北京西二号楼sky garden召开,持续5分钟. 与会人员:Jiyan He, Kun Yan, Lei Chai, Linfeng Qi, Xueqing W ...

  2. 【SpringBoot】入门程序和机制分析

    一.初建项目 首先要导入SpringBoot的Maven依赖 <!-- Inherit defaults from Spring Boot --> <!-- 这是SpringBoot ...

  3. 《Python数据科学手册》

    <Python数据科学手册>[美]Jake VanderPlas著 陶俊杰译 Absorb what is useful, discard what is not, and  add wh ...

  4. elasticsearch 数据备份

    ES数据备份找了一些方法,发现elasticdump 这个工具不错 elasticdump --input=http://192.168.0.92:9200/hs2840 --output ./hs2 ...

  5. Hadoop_14_MapReduce框架结构及其运行流程

    1.MapReduce原理篇 Mapreduce是一个分布式运算程序的编程框架,是用户开发“基于hadoop的数据分析应用”的核心框架: Mapreduce核心功能是将用户编写的业务逻辑代码和自带默认 ...

  6. linux (wsl) npm 无法安装包

    错误代码如下 request to https://registry.npm.taobao.org/yrm failed, reason: getaddrinfo EAI_AGAIN registry ...

  7. C10K问题和多进程模型

    收录编辑来自马哥教育相关课程 内核空间的相关程序在调度用户空间里的进程的时候,也占用了cpu资源...... nginx可以作为两种类型的反向代理 http 和smtp(mail) C10K问题, 当 ...

  8. Python3-def

    def hello(): print("这是一个无参数的方法!") hello(); print("") def helloOne(str): print(st ...

  9. macOS上更顺手的终端

    安装iTerm2.下载地址 https://iterm2.com/downloads/stable/latest 安装Nerd Fonts.下载地址 https://github.com/ryanoa ...

  10. @Transactional(转)

    概述@Transactional 是声明式事务管理 编程中使用的注解 添加位置 接口实现类或接口实现方法上,而不是接口类中访问权限:public 的方法才起作用 @Transactional 注解应该 ...