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. 2.6. 案例:使用BeautifuSoup4的爬虫

    案例:使用BeautifuSoup4的爬虫 我们以腾讯社招页面来做演示:http://hr.tencent.com/position.php?&start=10#a 使用BeautifuSou ...

  2. 剖析ajax

    学过javascript和接触过后端PHP语言必然要用到ajax,这是必学的一门学科,AJAX指的是Asynchronous JavaScript and XML,它使用XMLHttpRequest对 ...

  3. JAVA-如何打包成jar包

    主线:编译 - 打包 - 运行 准备工作: 1. 手动打可直接执行的jar包 1) 先使用javac编译java文件,得到class文件 2) 新建文件,名字任起,比如可以叫manifest,内容如下 ...

  4. 自定义ViewGroup基础巩固1---理解onLayout()方法

    自定义ViewGroup这个是在android中自定义控件中不可获缺的很重要的一部分,关于它的意义这里就不过多阐述了,为了在未来深入上继续走下去,所以先把基础给打牢. 这篇主要是理解ViewGroup ...

  5. PHP获取mysql数据表的字段名称及详细属性

    SHOW DATABASES //列出 MySQL Server 数据库. SHOW TABLES [FROM db_name] //列出数据库数据表. SHOW CREATE TABLES tbl_ ...

  6. BZOJ3157 国王奇遇记——神奇的推式子

    先膜一发Miskcoo,大佬的博客上多项式相关的非常全 原题戳我 题目大意 求 \[\sum\limits_{i=1}^{n}i^mm^i\] 题解 设一个函数\(f(i)=\sum\limits_{ ...

  7. python常用函数拾零

    Python常用内置函数总结: 整理过程中参考了runoob网站中python内置函数的相关知识点,特此鸣谢!! 原文地址:http://www.runoob.com/python/python-bu ...

  8. 题解 [BZOJ1925][SDOI2010] 地精部落

    题面 解析 这个似乎并不好讲啊 设\(f[i][j]\)表示有\(i\)座山, 最后一座山到达高度是\(i\)座中第\(j\)大的, 且最后一座山是山谷. 注意,\(i\)是代表有\(i\)座山,并不 ...

  9. Laravel中Contracts的理解和使用

    Laravel 的 Contracts 是一组定义了框架核心服务的接口.说白了就是一组接口.使用它就是为了降低耦合性. 即便如此,是不是也有同学会搞不清楚Contracts在lavarel体系中的到底 ...

  10. 添加Mybatis