Vue3-06-样式绑定-class绑定的写法总结

class绑定的概述

class 是 html 标签元素的一个属性，因此可以通过 属性绑定的语法进行动态的绑定。
属性绑定的语法 ： v-bind:class="xxxx" 
属性绑定的语法糖 ： :class="xxxxx"

动态绑定的class 可以与静态的 class 共存。

class 绑定的常用写法

比较常见的情况有如下三种：
1、html模板中直接写对象的方式；
2、直接绑定一个对象的方式（也可以是通过计算属性返回的对象）；
3、绑定数组的方式；

总的开发思路是：
1.style 中定义一下用到的class样式；
2.script 逻辑代码中定义控制展示的表达式（也可以在html中直接写简单的逻辑判断）；
3.html 代码中进行绑定。
无论那种方式，那必须都得有以上的三个步骤。

案例介绍 ：
  1、有一个div
  2、这个div有一个基本样式属性 【basediv】 ，宽200px，高200px，有个黑色的边框；
  3、定义一个控制字体的样式属性 ：【fontclass】
  4、定义一个控制背景颜色的样式属性 ：【backclass】

通过不同的写法，体会样式绑定的操作。

1.直接写对象的方式【掌握】

语法格式 ： :class="{样式1: 布尔值1,样式2: 布尔值2}"

<template>
    <!-- :class 进行样式的动态绑定 -->
    <div class="basediv" :class="{fontclass : fontclassShow,backclass : backclassShow}">
       这是 class 样式绑定的操作
    </div>
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 定义控制字体样式是否绑定的变量
    const fontclassShow = ref(true)
    // 定义控制背景样式是否绑定的变量
    const backclassShow = ref(false)

</script>
    
<style scoped>
    /* 基本的样式 */
    .basediv{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin-left: 100px;
        margin-top: 100px;
    }

    /* 字体样式 */
    .fontclass{
        font-size: 16px;
        font-weight: bold;
    }
    /* 背景样式 */
    .backclass{
        background-color: rgb(50, 225, 50);
    }

</style>

绑定的效果如下：

2.直接绑定对象的方式

语法格式 ： :class="对象"
此处的对象 其实就是 1中 的html中的那个对象,本质上还是一样的。

<template>
    <div class="basediv" :class="classObj">
       这是 class 样式绑定的操作
    </div>
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 定义控制字体样式是否绑定的变量
    const fontclassShow = ref(false)
    // 定义控制背景样式是否绑定的变量
    const backclassShow = ref(true)

    // 定义一个对象进行样式绑定
    const classObj = ref({
        fontclass : fontclassShow.value,
        backclass : backclassShow.value
    })

</script>
    
<style scoped>
    /* 基本的样式 */
    .basediv{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin-left: 100px;
        margin-top: 100px;
    }

    /* 字体样式 */
    .fontclass{
        font-size: 16px;
        font-weight: bold;
    }
    /* 背景样式 */
    .backclass{
        background-color: rgb(50, 225, 50);
    }

</style>

绑定的效果如下：

3.绑定数组的方式

绑定数组的时候，稍微有点不同，
就是将 样式类的名称 做成变量，然后进行绑定，
绑定的时候，用【逗号】进行隔开
当然了，这种绑定也是可以动态的，数组的元素可以嵌套对象，在数组中可以进行逻辑判断等操作。

3.1 直接把类作为数组元素

<template>
	<!-- 直接把要绑定的类写在这里，这种写法和静态的就差不多了 -->
    <div class="basediv" :class="[fontclassName,backclassName]">
       这是 class 样式绑定的操作<br>
    </div>
</template>
    
<script setup lang="ts">

    import { ref} from 'vue'

    // 定义类名称变量
    const fontclassName = ref("fontclass")
    const backclassName = ref("backclass")

</script>
    
<style scoped>
    /* 基本的样式 */
    .basediv{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin-left: 100px;
        margin-top: 100px;
    }

    /* 字体样式 */
    .fontclass{
        font-size: 16px;
        font-weight: bold;
    }
    /* 背景样式 */
    .backclass{
        background-color: rgb(50, 225, 50);
    }
</style>

3.2 在数组中写对象作为元素

<template>
    <!-- 数组中的元素是对象，更加的灵活 -->
    <div class="basediv" :class="[{fontclass:fontclassShow},backclassName]">
       这是 class 样式绑定的操作<br>
    </div>
</template>
    
<script setup lang="ts">

    import { ref,computed } from 'vue'

    // 定义控制字体样式是否绑定的变量
    const fontclassShow = ref(true)
    // 定义类名称变量
    const backclassName = ref("backclass")
   
</script>
    
<style scoped>
    /* 基本的样式 */
    .basediv{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin-left: 100px;
        margin-top: 100px;
    }

    /* 字体样式 */
    .fontclass{
        font-size: 16px;
        font-weight: bold;
    }
    /* 背景样式 */
    .backclass{
        background-color: rgb(50, 225, 50);
    }
</style>

3.3 在数组中写简单的逻辑表达式

<template>
    <!-- 通过三元表达式的进行样式的动态绑定 -->
    <div class="basediv" :class="[fontclassShow ? fontclassName : '',backclassName]">
       这是 class 样式绑定的操作<br>
    </div>
</template>
    
<script setup lang="ts">

    import { ref,computed } from 'vue'

    // 定义控制字体样式是否绑定的变量
    const fontclassShow = ref(true)

    // 定义类名称变量
    const fontclassName = ref("fontclass")
    const backclassName = ref("backclass")
   
</script>
    
<style scoped>
    /* 基本的样式 */
    .basediv{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin-left: 100px;
        margin-top: 100px;
    }

    /* 字体样式 */
    .fontclass{
        font-size: 16px;
        font-weight: bold;
    }
    /* 背景样式 */
    .backclass{
        background-color: rgb(50, 225, 50);
    }
</style>

样式绑定没问题：

补充 ：通过计算属性进行样式绑定

这种方式算是 方式2 的一种特殊但是较为常用的写法吧，
其实就是定义一个 计算属性，返回一个对象即可。

<template>
    <div class="basediv" :class="classObj2">
       这是 class 样式绑定的操作<br>
       {{ classObj2 }}
    </div>

</template>
    
<script setup lang="ts">

    import { ref,computed } from 'vue'

    // 定义控制字体样式是否绑定的变量
    const fontclassShow = ref(true)
    // 定义控制背景样式是否绑定的变量
    const backclassShow = ref(true)

    // 定义一个计算属性，返回一个对象，进行样式绑定
    const classObj2  = computed(()=>{
        // 返回一个对象即可
        return {
            fontclass : fontclassShow.value,
            backclass : backclassShow.value
        }
    })
    
</script>
    
<style scoped>
    /* 基本的样式 */
    .basediv{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin-left: 100px;
        margin-top: 100px;
    }

    /* 字体样式 */
    .fontclass{
        font-size: 16px;
        font-weight: bold;
    }
    /* 背景样式 */
    .backclass{
        background-color: rgb(50, 225, 50);
    }

</style>