vue绑定class的几种方式

2018-10-24  本文已影响127人  白雪公主960

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.数组语法

下面这个不是很常用吧

上一篇下一篇

猜你喜欢

热点阅读