vue实现样式之间的切换及vue动态样式的实现方法


Posted in Javascript onDecember 19, 2017

前言

既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决。

下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求

请看下图

vue实现样式之间的切换及vue动态样式的实现方法

导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢,

代码如下

html

附上vue中style与class绑定API

<div id="wrap" class="box">
  <div v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</div>
</div>

css         

*{
        padding: 0;margin: 0;
      }
      .box{
        height: 40px;
        background: cyan;
      }
      .nav{
        line-height: 40px;
        display: inline-block;
        margin-left: 100px;
        cursor: pointer;
      }
      .red{
        color: red;
      }

//前提是必须引入vuejs哦!
var vm = new Vue({
      el:"#wrap",
      data:{
        navLists:[
          {
            "text":"首页"           
          },
          {
            "text":"组件"           
          },
          {
            "text":"API"            
          },
          {
            "text":"我们"           
          }
        ],
        changeRed:0
      },
      methods:{
        reds:function(index){
          this.changeRed = index;
        }
      }
    });

仔细看看我们的js代码除了模拟的数据其实就只有一个简单的逻辑处理,比起之前的各种操作dom省了好多事。

ps:vue 动态样式的解决方法

:class="{active: isActive}"

这个就没什么好说的了,但是在类名有'-'号的时候回报错,

还有一种

class="[lineStyle(courseClick)]"
    lineStyle(isClick){
        if (isClick===true){
          return 'tab-items-current'
        }else {
          return 'class-tab-items'
        }
      }

总结

以上所述是小编给大家介绍的vue实现样式之间的切换及vue动态样式的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
jQuery知识点整理
Jan 30 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 #Javascript
常用的9个JavaScript图表库详解
Dec 19 #Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 #Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 #Javascript
Angular2实现组件交互的方法分析
Dec 19 #Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 #Javascript
jquery自定义显示消息数量
Dec 19 #jQuery
You might like
使用数据库保存session的方法
2006/10/09 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
个人职业及收入证明
2014/10/13 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
python 下划线的多种应用场景总结
2021/05/12 Python
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers