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. shell脚本编写之Hello World

    Linux下编写第一个Shell脚本 //创建一个.sh文件 vi demo1.sh //按i进入编辑模式 echo "Hello World !" //按esc→shift+:→ ...

  2. RabbitMQ 功能

    学习完了rabbitmq总一下 RabbitMQ依赖的语言 erlang 第一它可以实现不同程序之间的程序信息储存交互,在易用性.扩展性.高可用性的方面不俗. rabbitmq相当于一个中间人,我们同 ...

  3. c#中打开视频,word

    打开所有的文件的 代码,包括word/ppt/txt/xls/mp3/视频文件 添加using using System.Diagnostics; string fileName = @"D ...

  4. Python3+Appium学习笔记02-环境配置(下)

    配置所需软件及我当前使用的版本: 1)java jdk  1.8.0 2)android sdk  24.4.1 3)Python3  3.7.3 4)Appium-Python-Client 5)n ...

  5. python Flask中html模版中如何引用css,js等资源

    已有静态页面,需要将其整合到瓶的项目中,需要搞清楚, 之前的HTML中的: <link rel =“stylesheet”href =“css / framework7.ios.css”> ...

  6. new函数

    可以通过new函数直接创建一个类型的指针 变量名:=new(Type) 使用new函数创建的指针已有指向,可以使用*指针对象进行赋值. func main() { a := new(int) fmt. ...

  7. SQL 归纳

    查询父节点的所有子节点: SELECT * FROM menu m START WITH m.ID_ = '402882836068695f0160688eebf70006' CONNECT BY m ...

  8. C# MVC 视图 计算某一个列的总和

    需求:在需要计算每一列的总和显示在最后一行 eg; AA BB CC 1    2      3 1     2      3 SUM    2   4      6 大概是酱紫 我用的是mvc Mo ...

  9. linux批量添加用户和批量修改密码

    一.批量创建用户通过命令newusers可以实现批量的创建用户.这个命令的用法为 newusers file.txt(一个文本文件)文本文件内存放需要批量添加的用户信息但是对格式有要求格式:pw_na ...

  10. 012_linuxC++之_类的继承定义

    (一)访问控制和继承 公有继承(public):当一个类派生自公有基类时,基类的公有成员也是派生类的公有成员,基类的保护成员也是派生类的保护成员,基类的私有成员不能直接被派生类访问,但是可以通过调用基 ...