Vue class动态绑定样式的用法（附带实例）

在项目开发中，动态的页面中除了要绑定动态的数据，还要绑定动态的样式。

在模板中，给标签绑定动态样式的方式有两种，分别是 class 绑定和 style 绑定。在 HTML 中这两者的值都是字符串类型，而在 Vue 中自然也可以绑定动态的字符串值，但频繁地使用连接字符串对于开发者来说，不仅操作冗余枯燥，同时也很容易出现错误。

为此，Vue 专门增强了 class 和 style 的绑定语法，Vue 不仅可以支持动态字符串，还可以指定对象和数组类型值。本节主要讲解 class 动态样式。

class 绑定就是通过“v-bind：class="表达式"”来绑定动态类名样式的，当然我们一般会使用“：class="表达式"”的简写方式。表达式的值支持字符串、对象和数组 3 种类型，而且这 3 种类型的写法的使用场景也不尽相同，本节将带领读者依次学习和使用。

我们首先明确这 3 种类型的写法的使用场景（见下表），然后思考下面代码的运行效果。

表：写法的使用场景
写法	使用场景
字符串写法	样式的类名不确定，需要动态指定
对象写法	要绑定的样式的个数确定、名字也确定，但要动态地决定是否使用
数组写法	要绑定的样式的个数不确定、名字也不确定

值得一提的是，在一个标签上静态 class 与动态 class 可以同时存在，最终编译后，Vue 会将动态 class 与静态 class 合并，并指定为标签对象的 class 样式。

我们来看下面的代码，读者在阅读代码时可以思考对应标签最终应用了哪个样式。CSS 代码如下：

<style>
.basic {
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid black;
    margin-bottom: 10px;
}

.normal {
    background-color: skyblue;
}

.happy {
    background-color: rgba(255, 255, 0, 0.644);
}

.sad {
    background-color: gray;
}

.cyuyan1 {
    background-color: yellowgreen;
}

.cyuyan2 {
    font-size: 30px;
}

.cyuyan3 {
    border-radius: 20px;
}
</style>

Vue 代码如下：

<div id="app">
    <h2>测试 class 绑定 (点击更新)</h2>
    <!-- 绑定 class 样式——字符串写法，使用场景：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="classStr" @click="updateClass1">C语言中文网 1</div>
    <!-- 绑定 class 样式——对象写法，使用场景：要绑定的样式的个数确定、名字也确定，但要动态地决定是否使用 -->
    <div class="basic" :class="classObj" @click="updateClass2">C语言中文网 2</div>
    <!-- 绑定 class 样式——数组写法，使用场景：要绑定的样式的个数不确定、名字也不确定 -->
    <div class="basic" :class="classArr" @click="updateClass3">C语言中文网 3</div>
</div>

JavaScript 代码如下：

const { createApp } = Vue

createApp({
    data () {
        return {
            classStr: 'normal',
            classObj: {
                cyuyanl: true,
                cyuyan2: false,
            },
            classArr: ['cyuyanl', 'cyuyan2', 'cyuyan3'],
        }
    },
    methods: {
        // 更新动态的字符串类型 class
        updateClass1() {
            const arr = ['happy', 'sad', 'normal']
            const index = Math.floor(Math.random() * 3)
            this.classStr = arr[index]
        },
        // 更新动态的对象类型 class
        updateClass2 () {
            this.classObj.cyuyanl = !this.classObj.cyuyanl
            this.classObj.cyuyan2 = !this.classObj.cyuyan2
        },
        // 更新动态的数组类型 class
        updateClass3 () {
            this.classArr.pop()
        }
    },
}).mount('#app')

代码运行后的初始页面效果如下图所示：

图 1 初始页面效果

此时元素应用的类名分别是：

<div id="app" data-v-app>
    <h2>测试class绑定(点击更新)</h2>
    <!-- 绑定class样式——字符串写法，使用场景：样式的类名不确定，需要动态指定 -->
    <div class="basic normal">C语言中文网1</div>
    <!-- 绑定class样式——对象写法，使用场景：要绑定的样式的个数确定、名字也确定，但要动态地决定是否使用 -->
    <div class="basic cyuyan1">C语言中文网2</div>
    <!-- 绑定class样式——数组写法，使用场景：要绑定的样式的个数不确定、名字也不确定 -->
    <div class="basic">C语言中文网3</div>
</div>

在上面的代码中，每个 div 元素都有一个静态 class“basic”。

当点击第 1 个 div 元素时，它的样式会在 normal、sad 和 happy 这 3 个类名中随机切换，显示的样式也会随之更新。

当点击第 2 个 div 元素时，它的样式会在 cyuyan1 和 cyuyan2 这 2 个类名中来回切换，显示的样式也会随之更新。

当点击第 3 个 div 元素时，第 1 次点击类名中减少 cyuyan3，第 2 次点击类名中减少 cyuyan2，第 3 次点击类名中减少 cyuyan1。此时再点击 div 元素，页面不会发生变化，只会应用静态 class 的效果，因为此时已经没有动态的类名了。

Vue class动态绑定样式的用法（附带实例）

相关文章