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中的前绑定和后绑定详解
Aug 01 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
js实现鼠标跟随运动效果
Aug 02 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 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
示例详解Laravel的注册重构
2016/08/14 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
Django教程笔记之中间件middleware详解
2018/08/01 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
如何使用repr调试python程序
2020/02/28 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
中学家长会邀请函
2014/02/03 职场文书
自主招生专家推荐信
2015/03/26 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2016年寒假家长评语
2015/10/10 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript