vue Class and Style

1.class

(1)基本

<div v-bind:class="{ active: isActive }"></div>

(2)绑定多个class

<div class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
    isActive: true,
    hasError: false
}
//result
<div class="static active"></div>

(3)绑定对象

<div v-bind:class="classObject"></div>
//数据
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

(4)绑定数组

<div v-bind:class="[activeClass, errorClass]">
data: {
    activeClass: 'active',
    errorClass: 'text-danger'
}
//result
<div class="active text-danger"></div>
//如果想切换class
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
//也可以用对象的语法
<div v-bind:class="[{ active: isActive }, errorClass]">

2.style

(1)直接绑定

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
   activeColor: 'red',
   fontSize: 30
}

(2)绑定对象

<div v-bind:style="styleObject"></div>
data: {
   styleObject: {
       color: 'red',
      fontSize: '13px'
    }
}

(3)数组语法

<div v-bind:style="[baseStyles, overridingStyles]">

(4)自动补全
比如transform会自动添加兼容性处理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,841评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,740评论 18 399
  • 一. Java基础部分.................................................
    wy_sure阅读 3,832评论 0 11
  • 她相信爱情, 所以, 她相信自己的选择。 她把他介绍给朋友, 希望大家可以了解他; 他带她去见兄弟, 希望大家可以...
    听瑛语阅读 155评论 0 2
  • 面向对象 什么是对象? 对象就是带有属性和方法的数据类型。 任何一门高级语言都要面向对象,,JavaScript则...
    MGd阅读 215评论 1 1