9、Vue 3 （2024 版）基础笔记 - 样式绑定

class 和 style 都是 属性，因此，可以使用 v-bind 进行动态绑定。当处理复杂的样式时可能很容易出错，所以，Vue 专门为 class 和 style 进行了功能增强。

准备工作

1、创建组件

src/components/StyleDemo.vue

<template></template>

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

<style scoped></style>

2、引入组件

src/App.vue

<template>
    <style-demo/>
</template>

<script setup lang="ts">
    import StyleDemo from "@/components/StyleDemo.vue";
</script>

绑定 Class

对象绑定

绑定 1 个对象

src/components/StyleDemo.vue

<template>
    <div :class="{'header':isActive}">Class 样式绑定</div>
</template>

<script setup lang="ts">
    const isActive = true
</script>

<style scoped>
    .header {
        background-color: aqua;
    }
</style>

当 isActive 的值为 true 时，类 header 才会被添加到 div 元素中。F12 查看，如下：

<div data-v-7302a6f2="" class="header">Class 样式绑定</div>

绑定多个对象

src/components/StyleDemo.vue

<template>
    <div :class="{'header':isActive, 'p':isP}">Class 样式绑定</div>
</template>

<script setup lang="ts">
    const isActive = true
    const isP = true
</script>

<style scoped>
    .header {
        background-color: aqua;
    }
    .p {
        padding: 5px;
        font-size: 18px;
        font-weight: bold;
    }

</style>

F12 结果如下：

<div data-v-7302a6f2="" class="header p">Class 样式绑定</div>

绑定多个对象的简写方式：

src/components/StyleDemo.vue

<template>
    <div :class="{'header':isActive, 'p':isP}">Class 样式绑定</div>
    <div :class="classObj">Class 绑定多个样式的简写方式</div>
</template>

<script setup lang="ts">
    const isActive = true
    const isP = true
    const isM = true

    const classObj = {
        'p':isP,
        'm':isM,
        'header':isActive
    }
</script>

<style scoped>
    .header {
        background-color: aqua;
    }
    .p {
        padding: 5px;
        font-size: 18px;
        font-weight: bold;
    }
    .m {
        color: red;
    }

</style>

F12 结果如下：

<div data-v-7302a6f2="" class="header p">Class 样式绑定</div>
<div data-v-7302a6f2="" class="p m header">Class 绑定多个样式的简写方式</div>

绑定数组

绑定数组

src/components/StyleDemo.vue

<template>
    <div :class="[arrHeader, arrP, arrM]">绑定数组</div>
</template>

<script setup lang="ts">
    const arrHeader = "header"
    const arrP = 'p'
    const arrM = 'm'

</script>

<style scoped>
    .header {
        background-color: aqua;
    }
    .p {
        padding: 5px;
        font-size: 18px;
        font-weight: bold;
    }
    .m {
        color: red;
    }
</style>

[arrHeader, arrP, arrM]：这里是一个数组语法，表示将数组中的所有类名（字符串）应用到 div 元素上。数组中的每个元素（即 arrHeader、arrP 和 arrM 变量的值）代表一个类名。

数组中使用表达式

src/components/StyleDemo.vue

<template>

    <div :class="[isActive ? arrM : arrP, arrHeader]">数组样式表达式</div>
</template>

<script setup lang="ts">
    const arrHeader = "header"
    const arrP = 'p'
    const arrM = 'm'
    const isActive = true

</script>

<style scoped>
    .header {
        background-color: aqua;
    }
    .p {
        padding: 5px;
        font-size: 18px;
        font-weight: bold;
    }
    .m {
        color: red;
    }
</style>

数组嵌套对象

注意：只是数组嵌套对象

src/components/StyleDemo.vue

<template>

    <div :class="[isActive ? arrM : arrP, {'header':arrHeader}]">数组嵌套对象</div>
</template>

<script setup lang="ts">
    const arrHeader = true
    const arrP = 'p'
    const arrM = 'm'
    const isActive = true

</script>

<style scoped>
    .header {
        background-color: aqua;
    }
    .p {
        padding: 5px;
        font-size: 18px;
        font-weight: bold;
    }
    .m {
        color: red;
    }
</style>

style 绑定

内联方式中使用对象直接绑定样式

src/components/StyleDemo.vue

<template>
    <div :style="{color:'red'}">style 内容联直接绑定</div>
</template>

<script setup lang="ts">

</script>

<style scoped>
</style>

F 12 看看：

<div style="color: red;">style 内容联直接绑定</div>

使用动态值

src/components/StyleDemo.vue

<template>
    <div :style="{background:styleObj.bg, fontSize:styleObj.fontSize + 'px'}">style 内容联直接绑定</div>
</template>

<script setup lang="ts">
    const styleObj = {
        bg:'pink',
        fontSize: 18
    }
</script>

<style scoped>
</style>

F 12 看看：

<div style="background: pink; font-size: 18px;">style 内容联直接绑定</div>

对象简写

src/components/StyleDemo.vue

<template>
    <div :style="styleObj">style 内容联直接绑定</div>
</template>

<script setup lang="ts">
    const styleObj = {
        background:'pink',
        fontSize: '18px'
    }
</script>

<style scoped>
</style>

绑定数组（不推荐）

src/components/StyleDemo.vue

<template>
    <div :style="[styleObj]">style 内容联直接绑定</div>
</template>

<script setup lang="ts">
    const styleObj = {
        background:'pink',
        fontSize: '18px'
    }
</script>

<style scoped>
</style>

与对象相比，数组方式只是增加了[]。