样式绑定

绑定 HTML class

需求：美化 h1 元素，有如下的 CSS 样式：

1. 其中 .normal 类样式总是生效；
2. 点击 toggle active 按钮切换 .active 类样式；
3. 点击 toggle decoration 按钮切换 .decoration 类样式；

/* 普通样式：正常粗细 */
.normal {
  font-weight: normal;
}

/* 激活时的样式：加粗、橘黄色、倾斜 */
.active {
  font-weight: bold;
  color: orange;
  font-style: italic;
}

/* 文本装饰 */
.decoration {
  text-decoration: underline solid purple 0.6em;
  text-underline-offset: -0.4em;
  text-decoration-skip-ink: none;
}

动静分离 + 三元表达式

总是生效的类名可以写到静态的 class 属性中，动态绑定的类名可以结合三元表达式写到 v-bind:class 属性中。动态和静态的 class 属性可以并存。

setup() {
  // 用来控制是否为元素应用 .active 类样式
  const isActive = ref(false)

  return {
    isActive
  }
}

<button @click="isActive = !isActive">toggle active</button>

<h1 class="normal" :class="isActive ? 'active' : ''">文章标题 --- {{ isActive }}</h1>

TIP

直接绑定三元表达式的缺点：无法控制多个类名的按需切换。

class 数组

结合数组可以动态为 class 属性绑定多个类名。代码示例如下：

setup() {
  // 用来控制是否为元素应用 .active 类样式
  const isActive = ref(false)
  // 用来控制是否为元素应用 .decoration 类样式
  const isDecorate = ref(false)

  return {
    isActive,
    isDecorate
  }
}

<button @click="isActive = !isActive">toggle active</button>
<button @click="isDecorate = !isDecorate">toggle decotation</button>

<h1 class="normal" :class="[isActive ? 'active' : '', isDecorate? 'decoration': '']">文章标题 --- {{ isActive }} --- {{ isDecorate }}</h1>

class 对象

在数组中声明多个三元表达式会让代码比较臃肿。其实三元表达式的本质是：根据布尔值的 true/false，控制是否为元素应用指定的 class 类样式。

因此为了代码的简洁，数组中的多个三元表达式可以替换成对象的写法：

<p :class="{类名A: 布尔值1, 类名B: 布尔值2}"></p>
<!-- 当“布尔值1”为 true 的时候，为元素应用“类名A”，否则移除“类名A” -->
<!-- 当“布尔值2”为 true 的时候，为元素应用“类名B”，否则移除“类名B” -->

代码示例：

<h1 class="normal" :class="{active: isActive, decoration: isDecorate}">文章标题 --- {{ isActive }} --- {{ isDecorate }}</h1>

class 计算属性

为了进一步简化 HTML 模板中的 JS 逻辑，我们可以把 class 对象封装为计算属性：

 setup() {
   // 源数据
   const isActive = ref(false)
   const isDecorate = ref(false)

   // 计算属性：控制标题的样式
   const titleClassObj = computed(() => ({ active: isActive.value, decoration: isDecorate.value }))

   return {
     isActive,
     isDecorate,
     titleClassObj
   }
 }

<button @click="isActive = !isActive">toggle active</button>
<button @click="isDecorate = !isDecorate">toggle decotation</button>

<!-- 把计算属性返回的“样式对象”绑定到 class，能让模板结构更简洁 -->
<h1 class="normal" :class="titleClassObj">文章标题 --- {{ isActive }} --- {{ isDecorate }}</h1>

绑定内联样式

样式对象

vue 支持为 style 属性动态绑定样式对象，语法格式如下：

<p style="静态的行内样式" :style="{ 属性A: 值1, 属性B: 值2 }"></p>

示例代码：

setup() {
  const fontSize = ref(12)
  const color = ref('#ffffff')

  return {
    fontSize,
    color
  }
}

<button @click="fontSize+=2">fontSize +2</button>
<input type="color" v-model="color" />

<h1 :style="{'font-size': fontSize + 'px', color}">地表最强系列·视频教程</h1>

计算属性

为 style 绑定多个样式属性时，会让模板中的代码显得臃肿，此时推荐把动态绑定的样式对象封装为计算属性：

setup() {
  const fontSize = ref(12)
  const color = ref('#ffffff')

  // 计算属性：返回样式对象
  const styleObject = computed(() => ({ 'font-size': fontSize.value + 'px', color: color.value }))

  return {
    fontSize,
    color,
    styleObject
  }
}

<button @click="fontSize+=2">fontSize +2</button>
<input type="color" v-model="color" />

<h1 :style="styleObject">地表最强系列·视频教程</h1>