vue 动态样式

目录

一、动态绑定 class

1、对象语法

2、数组语法

3、三元表达式动态绑定 class

二、动态的 style

1、对象语法

2、数组语法

3、三元表达式动态绑定 style

4、style 多重值

三、vue.js 对浏览器前缀的处理

---

一、动态绑定 class

1、对象语法

v-bind:class='{ 样式名: 条件 }'

“条件” 控制着是否在 class 列表中增加该 “样式名”，只有条件满足时，class 列表才会增加该 “样式名”。

例如：

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

上面的语法表示：

• 当 isActive 为 true 时，则 active 这个 class 样式 就被加载。
• 当 isActive 为 false 时，则 active 这个 class 样式 不被加载。

可以在对象中传入更多字段来动态切换多个 class：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。 

【注意】

“条件” 可以定义在 data 中，或者以 computed 计算属性的方式生成。

2、数组语法

v-bind:class='[别名1, 别名2]'
// ...
data: {
  别名1: '样式名1',
  别名2: '样式名2'
}

例如：

<div :class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

 渲染为：

<div class="active text-danger"></div>

有多个条件时，还可以这样写：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

这样写将始终添加 errorClass，但是只有在 isActive 是 true 时才添加 activeClass。

3、三元表达式动态绑定 class

v-bind:class='条件 ? "样式1" : "样式2"'

例如：

<div :class="isActive ? 'oneStyle' : 'twoStyle'"></div>

二、动态的 style

1、对象语法

v-bind:style="{ 样式名1: 样式值1, 样式名2: 样式值2 }"

例如：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
// ...
data: {
    activeColor: 'red',
    fontSize: 12
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

 当然，也可以结合计算属性来使用哦。

2、数组语法

v-bind:style 的数组语法可以将 多个样式对象 应用到同一个元素上。

语法：

v-bind:style="[样式对象1, 样式对象2]"

例如：

<div :style="[baseStyles, overridingStyles]"></div>

3、三元表达式动态绑定 style

v-bind:style="{ 样式名: 条件 ? 样式值1 : 样式值2 }"

例如：

<div :style="{ color: isTruthy ? 'red': 'blue' }"></div>

4、style 多重值

你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。 

三、vue.js 对浏览器前缀的处理

Vue.js 会自动侦测并添加相应的 浏览器前缀。

参考文档：Class 与 Style 绑定 — Vue.js