大家好，欢迎来到IT知识分享网。

一、动态绑定class。

可以使用v-bind绑定，如“v-bind:class = ‘‘” ，缩写：“:class = ””。

不同形式：

1.数组形式(类名必须用”包起来)：

<div :class=”[‘red’, ‘font16’]”>内容</div>

2.数组中使用三元表达式：

<div :class=”[‘red’, ‘thin’, isactive?’red’:’yellow’]”>内容</div>

说明：如果“isaction”的布尔值为true，那么使用“red”类，否则“yellow”。

3.数组中嵌套对象：

<div :class=”[‘red’, ‘thin’, {‘active’: isactive}]”>内容</div>

说明：“ {‘active’: isactive}”中的“isactive”的值为true时，那么使用该类。为false就不使用该类。

4.直接使用对象：

<div :class=”{red:true, italic:true, active:true, thin:true}”>内容</div>

说明：此对象中，键与值一一对应，当前值为true的时候，当前对应的键（也就是类名）就使用，为false就不应用。

不需要动态绑定的类：

<div class=”static” :class=”{‘active’:isActive,’error’:isError}”></div>

另外，:class可以与普通class共存。

二、动态绑定style。

可以使用v-bind绑定，如“v-bind:style = ‘‘” ，缩写：“:style = ””。

不同形式：

1.直接用v-bind绑定 :style = ”：

<div :style=”{color: ‘red’, ‘font-size’: ’40px’}”>这是一个文本</div>

如果对象的键有特殊符号“-”等等，那么要用引号括起来。

2.将样式对象，定义到 data 中，并直接引用到 :style 中

  data: {
      styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
  }

IT知识分享网

3.如果绑定多个，则写在一个数组中

<div :style='[styleObj1, styleObj2]’>这是一个文本</div>

绑定样式名时，如果写成驼峰命名，则不需要引号，如果是复杂命令，则需要加引号