类

@class

类 class 和内联样式 style 都是元素的属性 attribute，使用 v-bind 将它们和动态的字符串绑定

除了字符串外，表达式的值还可以使用对象 Object 或数组 Array

更多类的绑定，请访问 :class

绑定字符串

1. 简单字符串：由字符串变量决定使用哪个类 - 较少使用

<div :class="bold">hi,there</div>

let bold='bold'

.bold {
  font-weight: 600;
}

2. 使用三元表达式：实现2选1；isActive 为真，使用 bold 类；否则使用 underline 类

三元表达式的结果是一个字符串，所以直接写就可以，不需要 {}

<div :class="isActive ? 'bold' : 'underline'">hi,there</div>

绑定对象

使用一个或多个值对 key-value pair 来应用一个或多个类 - 开关类

1. 使用布尔变量：如果 isActive 为真，使用 bold 类；为假，不使用

<div :class="{ 'bold': isActive }">hi,there</div>

2. 使用普通表达式：ind 等于 1，使用 active 类

<div :class="{ 'active': ind == 1 }">hi,there.</div>

3. 多个值对

<div :class="{ active: false, done: true;}">hi,there.</div>

4. 使用字符串变量和对应的对象结合起来运用

<div :class="isOn">hi,there.</div>

let isOn = {
    active: false,
    done: true
}

绑定数组

使用多个类

同时使用静态类和动态类

数组中可以使用字符串、对象和三元表达式指定类

集中方式

<div :class="[ 'item', isActive ? 'bold' : 'underline' ]">hi,there</div>
<div :class="[ 'item', { 'active': isActive } ]">hi,there</div>
<div :class="[ 'item', { 'active': isActive, 'done': isDone } ]">hi,there</div>

分离方式 - 绑定类和静态添加的类不会冲突，最终会叠加在一起进行渲染，可读性更好 - 建议

<div class="item" :class=" flag == 0 ? 'active' : 'normal' ">hi,there</div>

类一定是字符串，所以类应该用括号括起来，否则会被当作绑定的变量；而变量不用

注意单引号和双引号的匹配

复合 CSS 属性使用小驼峰方式

Summary & Homework

Summary

字符串：三元表达式

对象

数组

Homework

[] 导航/标签页 TabCard

效果：单击导航列表，对应的导航项高亮

要求：分别设计静态类和动态类，综合使用上述各种方式实现

这里使用响应式数据 ref()

<div class="test">
  <div class="btn" :class="{ 'active': ind == 0 }" @click="ind = 0">Lorem.</div>
  <div class="btn" :class="{ 'active': ind == 1 }" @click="ind = 1">Labore!</div>
  <div class="btn" :class="{ 'active': ind == 2 }" @click="ind = 2">Quos.</div>
  <div class="btn" :class="{ 'active': ind == 3 }" @click="ind = 3">Doloremque.</div>
</div>

import { ref } from 'vue'
const ind = ref(0)

.test {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn {
  cursor: pointer;
  padding: 0 10px;
  border-radius: 4px;
}

.active {
  background-color: #f40;
  color: #fff;
}

[] 主题切换

<span 
  @click="darkMode = !darkMode" 
  class="iconfont" 
  :class="darkMode ? 'icon-Sun' : 'icon-Moon-Star'">
</span>