动态 class 与 style

在前端开发中，页面样式是必不可少的。通常一个页面中大部分的样式在写好后都不会再发生变化。但是，还有一小部分样式是可能会根据用户的操作来动态发生改变。
因此，在 Vue 中，除了可以按照常规的方式编写静态样式外，还可以使用动态 class 和 style 的方式来处理需要动态变化的样式。

一、动态 class

Vue 中提供了“对象”和“数组”两种语法来动态绑定 class。

1、对象语法

我们可以给 v-bind:class 设置一个对象，来实现 class 的动态绑定。
语法结构参考如下：

<标签名 v-bind:class="{ class名一: 判断条件一, class名二: 判断条件二 }"></标签名>

说明：对象的键，是我们想要使用的 class 名；对象的值，最终会转换为一个布尔值，来决定当前 class 是否生效。

<style>
    .active {
        color: red;
    }
</style>
<h1 v-bind:class="{ active: true }"></h1>
<h1 v-bind:class="{ active: isActive }"></h1>
<h1 v-bind:class="{ active: num >= 0 }"></h1>
<script>
    new Vue({
        data() {
            return {
                isActive: false,
                num: 1
            }
        }
    })
</script>

2、数组语法

除了对象的语法以外，我们也可以给 v-bind:class 设置一个数组，来实现 class 的动态绑定。

<style>
    .active {
        color: red;
    }
</style>
<h1 v-bind:class="[isActive ? 'active': '']"></h1>
<script>
    new Vue({
        data() {
            return {
                isActive: false
            }
        }
    })
</script>

二、动态 style

Vue 中也提供了“对象”和“数组”两种语法来动态绑定 style。

1、对象语法

<h1 v-bind:style="{ color: fontColor, width: width }"></h1>
<script>
    new Vue({
        data() {
            return {
                fontColor: 'red',
                width: '100px'
            }
        }
    })
</script>

2、数组语法

<h1 v-bind:style="[style1, style2]"></h1>
<script>
    new Vue({
        data() {
            return {
                style1: {
                    color: 'red',
                    width: '100px'
                },
                style2: {
                    height: '100px'
                }
            }
        }
    })
</script>