【vue3入门】-【13】class绑定

class绑定

数据绑定的一个常见需求场景是操纵元素的CSS class列表，因为class是Attribute，我们可以和其他Attribute一样使用v-bind将它们动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，vue专门为class和v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

• 绑定对象

• 多个对象绑定

• 绑定数组

<template>
    <h3>class绑定</h3>
    <p :class="myclass">class样式绑定</p>
    <!--样式绑定-绑定对象,对象的值决定了样式是否显示，如active:true则代表要展示active属性-->
    <p :class="{ 'active': isactive, 'danger': hasError }">class样式绑定1</p>
    <!--样式绑定-多个对象绑定--->
    <p :class="classObject">class样式绑定2</p>
    <!--样式绑定-绑定数组-->
    <p :class="[arrActive,arrHasError]">class样式绑定3</p>
</template>
<script>
export default {
    data() {
        return {
            myclass: "demo",
            isactive: true,
            hasError: false,
            classObject: {
                active: true,
                danger: true
            },
            arrActive: "active",
            arrHasError:"danger"

        }
    }
}
</script>
<style>
.active {
    font-size: 30px;
}
.danger {
    color: blue;
}
</style>

• 三元表达式

如果想在数组中有条件的渲染某个class，可以使用三元表达式

<template>
    <h3>class绑定</h3>
    <!--三元表达式数组, 如下isactice为true则展示active的样式，否则展示danger的样式-->
    <p :class="[isactive ? 'active' : 'danger']">class样式绑定4</p>
    <!--isactive为真时，同时展示actice和danger的样式，否则不展示样式-->
    <p :class="[isactive ? 'active danger' : '']">class样式绑定4</p>
</template>
<script>
export default {
    data() {
        return {
            isactive: false,
        }
    }
}
</script>
<style>
.active {
    font-size: 30px;
}
.danger {
    color: blue;
}
</style>

• 数组和对象同时使用

温馨提示

数组和对象嵌套过程中，只能是数组嵌套对象，不能反其道而行

<template>
    <h3>class绑定</h3>
    <!--数组和对象同时使用-->
    <p :class="[isactive ? 'active' : '', { 'danger': hasError }]">class样式绑定5</p>
</template>
<script>
export default {
    data() {
        return {
            isactive: false,
            hasError: true,
        }
    }
}
</script>

<style>
.active {
    font-size: 30px;
}
.danger {
    color: blue;
}
</style>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9