思路:

通过 v-bind:class="true ? style1 : style2 "

配合三元表达式完成样式的切换

具体实现

        //return设置控制的参数
//有多个需要样式切换的话需要使用数字来标识是再那一个位置
/*控制样式的显示隐藏*/
styelTrue:1,
/*具体的样式*/
ulStyle:"",
//数字不匹的情况下显示的样式
liL:"liL",
liC:"liC",
liR:"liR",
//点击改变样式的事件
<li type="warning" underline="true" @click="changeUp(1)"
v-bind:class="styelTrue == 1 ? ulStyle : liL"
style="padding: 20px 0px; font-size: 16px;cursor: pointer;display: inline-block">Windows专区
</li>&emsp;
//事件部分
changeUp(up) {
console.log(up)
switch (up) {
case 1:
this.styelTrue = 1;
this.ulStyle = "liStyle1";
break;
}
}
 //具体样式部分
.liStyle1{
border-bottom:2px solid black;
color: black;
}
.liStyle2{
border-bottom:2px solid black;
color: black;
}
.liStyle3{
border-bottom:2px solid black;
color: black;
}
.liL{
color: gray;
}
.liL:hover{
border-bottom:2px solid black;
color: black;
}
.liC{
color: gray;
}
.liC:hover{
color: black;
border-bottom:2px solid black;
}
.liR{
color: gray;
}
.liR:hover{
border-bottom:2px solid black;
color: black;
}

实现效果

vue动态样式设置的更多相关文章

  1. vue 动态样式

    <p :style="{width:'4px',height: '24px',background: '#f7ce51'}"></p> <p:styl ...

  2. vue 滚动条样式设置

      App.vue 文件下加入下面css   // 滚动条宽度 ::-webkit-scrollbar{   width: 6px; } /* 定义滚动条轨道 */ ::-webkit-scrollb ...

  3. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  4. vue中动态样式不起作用? scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

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

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

  6. vue.js样式绑定

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

  7. 10.Vue.js 样式绑定

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

  8. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  9. 深入理解脚本化CSS系列第五篇——动态样式

    前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...

随机推荐

  1. LeetCode122——Best Time to Buy and Sell Stock II

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  2. 百万年薪python之路 -- while循环

    day02 1.while循环 -- while关键字 while 空格 条件 冒号 缩进 循环体 while 5>4: print("Hello World!") 数字中非 ...

  3. 10个让你受益匪浅的css使用技巧

    1. Safari 3D变换会忽略z-index的层级 在Safari浏览器下(此Safari浏览器包括iOS的Safari,iPhone上的微信浏览器,以及Mac OS X系统的Safari浏览器) ...

  4. Hadoop 在 windows 7 64位的配置(一)|非cygwin

    参照原文   http://blog.csdn.net/supperman_009/article/details/39991809 环境: Hadoop-2.4.1 Windows 7 64位 jd ...

  5. Creator 2.2.0 终于等来了这款Shader组件神器!一招搞定Effect特效

    先看下视频演示: ShaderHelper2支持Creator 2.2.0 视频录完后才想起,还没在微信小游戏中测试,赶紧试试,下面是在微信开发者工具中的截图. 径向模糊 探照灯 提供了一个Shade ...

  6. vue-music 跨域获取QQ音乐歌单接口

    最近在看vue音乐APP视频学习,需要跨域获取歌单数据,视频中老师是在build/dev-server.js文件配置跨域接口的,但是新版的vue-cli是没有这个文件的,我的vue版本是"2 ...

  7. 调用微信js sdk

    场景:需要调用微信获取当前位置的借口. 途径:查看微信 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 .后 ...

  8. Python安装cx_Oracle与操作数据测试小结

    这里简单总结一下Python操作Oracle数据库这方面的相关知识.只是简单的整理一下之前的实验和笔记.这里的测试服务器为CentOS Linux release 7.5. 个人实验.测试.采集数据的 ...

  9. NIO 在Tomcat中的应用

    对NIO的理解 个人单方面认为,NIO与BIO的最大区别在于主动和被动,使用BIO的方式需要等待被调用方返回数据,很明显此时调用者是被动的. 举个例子 阻塞IO 假设你是一个胆小又害羞的男孩子,你约了 ...

  10. Kong01-Kong 介绍

    概述 Kong 是在客户端和(微)服务间转发API通信的API网关,通过插件扩展功能. Kong 的官方网站,https://konghq.com/kong Kong 的官方 Github 站点:ht ...