类

@class

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

除了字符串外，表达式的值也可以是对象或数组

绑定类和静态添加的类不会冲突，最终会叠加在一起进行渲染

单个类

1.简单字符串：对应的类由字符串表示

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

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

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

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

3. 对象：对应的类由字符串表示；开关类

用不用这个类？isActive为真，使用bold类；为假，不使用

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

[] 综合运用

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

const isOn = reactive({
    active: false,
    done: true
})

多个类

同时使用静态类和动态类

1. 数组方式

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

<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>

2. 分离方式

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

类名需要使用引号包裹，否则会被当作绑定的变量

类一定是字符串，所以类应该用括号括起来，而变量不用

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

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

使用 vue devtool 调试

[] 导航/标签页

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

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