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. ngnix反向代理后获取用户真实ip及https配置

    server {listen 80;listen 802;server_name test111.xxxx.com 118.24.122.101; gzip on;gzip_min_length 10 ...

  2. Image Processing and Computer Vision_Review:Local Invariant Feature Detectors: A Survey——2007.11

    翻译 局部不变特征探测器:一项调查 摘要 -在本次调查中,我们概述了不变兴趣点探测器,它们如何随着时间的推移而发展,它们如何工作,以及它们各自的优点和缺点.我们首先定义理想局部特征检测器的属性.接下来 ...

  3. Dart 面向对象 类 方法

    Dart是一门使用类和单继承的面向对象语言,所有的对象都是类的实例,并且所有的类都是Object的子类. 面向对象编程(OOP)的三个基本特征是:封装.继承.多态 封装:封装是对象和类概念的主要特性. ...

  4. 使用python2与python3创建一个简单的http服务(基于SimpleHTTPServer)

    python2与python3基于SimpleHTTPServer创建一个http服务的方法是不同的: 一.在linux服务器上面检查一下自己的python版本:如: [root@zabbix ~]# ...

  5. c#读取文件夹路径,并保存在textBox1中

    private void button3_Click(object sender, RoutedEventArgs e) { System.Windows.Forms.FolderBrowserDia ...

  6. c#使用 StackExchange.Redis 封装 RedisHelper

    公司一直在用.net自带的缓存,大家都知道.net自带缓存的缺点,就不多说了,不知道的可以查一查,领导最近在说分布式缓存,我们选的是redis,领导让我不忙的时候封装一下,搜索了两天,选了选第三方的插 ...

  7. zendstudio zenddebug 调试技巧

    毋庸置疑debugger软件减轻了程序员的负担. 最近使用php开发,感觉没有开发C#时的爽快了,原因就是debugger似乎因为商业目的(zend server的原因) zend debugger ...

  8. kubernetes Configmap secret的使用

    kubernetes configmap 核心作用是让配置信息和镜像解耦,pod可以使用configmap的数据生成配置文件.如果后端的pod配置文件要改变时,只需要更改下configmap里面的数据 ...

  9. Noip2016 提高组 Day2 T1 组合数问题

    题目描述 组合数表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的定 义,我们可以给出计算 ...

  10. HFUUOJ1024 动态开点线段树+标记永久化

    题意 分析 动态加点线段树,标记永久化好写常数小 Code #include<bits/stdc++.h> #define fi first #define se second #defi ...