active-class

用于路由上

<router-link to="/xxx" active-class="selected"></router-link>

进入此路由时，active-class被激活，'selected'会成为真正的class。

动态绑定class

• &&逻辑（或?:表达式）

<div :class="表达式1 && className1"></div>

• 写为对象形式：

<div :class="{className1: 表达式1, className2: 表达式2}"></div>

其含义为，当表达式为真时，添加相应的 class

scoped 模式

scoped 模式，样式仅在当前组件有效。

deep

在 scoped 模式下，还可以用 deep 模式，表示样式也能作用到当前组件用到的后代组件上。

<style scoped lang="scss">
    ::v-deep div{
        /* ... */
    }
</style>

这种做法也不太严谨，推荐结合使用以下方法。

从外部给组件中的元素绑定class（荐！）

使用组件Son时希望给组件内的某个元素设置 class 属性，可用props。

有一种约定俗成的方法是以props classPrefix作为元素class的前缀：

// Son 组件内部
<template>
	<div>
        <div :class="classPrefix && `${classPrefix}-div1`">1</div>
        <div :class="classPrefix && `${classPrefix}-div2`">2</div>
        <div>3</div>
        <div>4</div>
    </div>
</template>

<script>
	export default {
        props: ['classPrefix']
    }
</script>

使用组件时，仅需传入一个classPrefix，组件内的每个元素都可以绑定自己专有的class。