美文网首页
vue绑定class的几种方式

vue绑定class的几种方式

作者: 白雪公主960 | 来源:发表于2018-10-24 16:52 被阅读127次

    1.对象语法

    vue文件中

    <div :class="{'active':isActive}">
    

    js文件中

    export default {
      data() {
        return {
          isActive:true    
        };
      } 
    };
    

    类名active依赖于数据isActive,当其为true时,div就会拥有类名active,为false时则没有类名active。

    <div class="static" :class="{'active':isActive,'error':isError}">
    

    js文件中

    export default {
      data() {
        return {
          isActive:true,
          isError:false,
        };
      } 
    };
    

    对象可传入多个属性来动态的切换class,也可以与普通的class共存。

    2.数组语法

    下面这个不是很常用吧

    相关文章

      网友评论

          本文标题:vue绑定class的几种方式

          本文链接:https://www.haomeiwen.com/subject/emsxtqtx.html