zoukankan      html  css  js  c++  java
  • vue动态绑定类样式ClassName知多少

    对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满足不了。

    想起之前微信小程序中动态添加类样式的方式是这样的 class='item good {{isEdit?"isEdit":""}}',那么vue中应该也有一种写法能够同时添加指定类样式与数据源中的类样式。

    然后就去查了些资料做了下整理,汇总了下vue中动态添加类样式多种用法:

    一. 绑定字符串(不建议使用)

    <div :class=" 'classA classB' ">Demo1</div>

    二. 绑定数据变量:

    <div :class="classA">Demo2</div>
    data: {
      classA: 'class-a'  //当classA改变时将更新class
    }

    写在指令中的值会被视作表达式,如javascript表达式,因此v-bind:class接受三目运算:

    <div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>

    三. 绑定对象:

    <div :class="{ 'class-a': true, 'class-b': false}">Demo4</div>

    四. 绑定数组:

    <div :class="[classA, classB]">Demo7</div>

    对于绑定 数组这种用法,拓展性就比较大了,可以综合上边多种组合使用,如下:

    <li v-for="item in navData" :class="[{'layui-this':currentRouter==item.router},item.class]" >
  • 相关阅读:
    Linux设备树(四 中断)
    Linux设备树(三 属性)
    Linux设备树(二 节点)
    责任链设计模式
    获取服务器内存和可用线程
    秒杀抢购思路解析
    Hystrix 用法及注解用法
    object is not an instance of declaring class
    sqlserver 截取字符串
    sqlserver 转化函数
  • 原文地址:https://www.cnblogs.com/xyyt/p/8777724.html
Copyright © 2011-2022 走看看