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 相关文章推荐
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
javascript与有限状态机详解
May 08 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 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
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
jquery键盘事件介绍
2011/01/31 Javascript
javascript几个易错点记录
2014/11/26 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
几行js代码实现自适应
2017/02/24 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
python计算时间差的方法
2015/05/20 Python
python assert的用处示例详解
2019/04/01 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
入职担保书范文
2014/05/21 职场文书
美术课外活动总结
2014/07/08 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
交通事故起诉书
2015/05/19 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技