Vue 类与样式绑定

Happier2024年9月13日...大约 4 分钟

Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强，除了字符串外，表达式的值也可以是对象或数组

class 绑定

绑定对象

我们可以传给 v-bind:class (简写为 :class) 一个对象，以动态地切换 class

单文件组件

<template>
  <!-- 给 :class 传递一个对象来动态切换样式 -->
  <div :class="{ class1: isClass1 }">盒子1</div>
  <button @click="isClass1 = !isClass1">修改盒子1样式</button>
  <!-- :class 可以和普通 class 共存，对象中可以写多个字段 -->
  <div class="class1" :class="{ class2: isClass2, class3: isClass3 }">盒子2</div>
  <button @click="isClass2 = !isClass2">修改盒子2样式</button>
  <!-- 绑定的对象不一定需要写成内联字面量的形式，也可以直接绑定一个对象 -->
  <div :class="classObj">盒子3</div>
  <!-- 可以绑定一个返回对象的计算属性 -->
  <div :class="classObj2">盒子4</div>
</template>

<script setup>
import { ref, computed } from 'vue'
const isClass1 = ref(true)
const isClass2 = ref(true)
const isClass3 = ref(false)
const classObj = ref({
  class3: true,
  class4: true
})
const classObj2 = computed(() => ({
  class1: true,
  class2: false,
}))
</script>

<style scoped>
.class1 {
  background-color: pink;
}

.class2 {
  color: aquamarine;
}

.class3 {
  background-color: orange;
}

.class4 {
  color: red;
}
</style>

HTML

<head>
    <style>
        .class1 {
            background-color: pink;
        }
        .class2 {
            color: aquamarine;
        }
        .class3 {
            background-color: orange;
        }
        .class4 {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 给 :class 传递一个对象来动态切换样式 -->
        <div :class="{ class1: isClass1 }">盒子1</div>
        <button @click="isClass1 = !isClass1">修改盒子1样式</button>
        <!-- :class 可以和普通 class 共存，对象中可以写多个字段 -->
        <div class="class1" :class="{ class2: isClass2, class3: isClass3 }">盒子2</div>
        <button @click="isClass2 = !isClass2">修改盒子2样式</button>
        <!-- 绑定的对象不一定需要写成内联字面量的形式，也可以直接绑定一个对象 -->
        <div :class="classObj">盒子3</div>
        <!-- 可以绑定一个返回对象的计算属性 -->
        <div :class="classObj2">盒子4</div>
    </div>
    <script type="module">
        import { createApp, ref, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            setup() {
                const isClass1 = ref(true)
                const isClass2 = ref(true)
                const isClass3 = ref(false)
                const classObj = ref({
                    class3: true,
                    class4: true
                })
                const classObj2 = computed(() => ({
                    class1: true,
                    class2: false,
                }))
                return {
                    isClass1,
                    isClass2,
                    isClass3,
                    classObj,
                    classObj2
                }
            }
        }).mount('#app')
    </script>
</body>

绑定数组

我们可以把一个数组传给 v-bind:class (简写为 :class)，以应用一个 class 列表

单文件组件

<template>
  <!-- 给 :class 传递一个数组 -->
  <div :class="[class1, class2]">盒子1</div>
  <!-- 如果想在数组中有条件地渲染某个 class,可以使用三元表达式 -->
  <div :class="[class1, isClass2 ? class2 : '']">盒子2</div>
  <button @click="isClass2 = !isClass2">修改盒子2样式</button>
  <!-- 可以在数组中嵌套对象 -->
  <div :class="[{ class3: true }, class4]">盒子3</div>
</template>

<script setup>
import { ref } from 'vue'
const class1 = ref('class1')
const class2 = ref('class2')
const isClass2 = ref(true)
const class4 = ref('class4')
</script>

<style scoped>
.class1 {
  background-color: pink;
}

.class2 {
  color: aquamarine;
}

.class3 {
  background-color: orange;
}

.class4 {
  color: red;
}
</style>

HTML

<head>
    <style>
        .class1 {
            background-color: pink;
        }
        .class2 {
            color: aquamarine;
        }
        .class3 {
            background-color: orange;
        }
        .class4 {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 给 :class 传递一个数组 -->
        <div :class="[class1, class2]">盒子1</div>
        <!-- 如果想在数组中有条件地渲染某个 class,可以使用三元表达式 -->
        <div :class="[class1, isClass2 ? class2 : '']">盒子2</div>
        <button @click="isClass2 = !isClass2">修改盒子2样式</button>
        <!-- 可以在数组中嵌套对象 -->
        <div :class="[{ class3: true },class4]">盒子3</div>
    </div>
    <script type="module">
        import { createApp, ref, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            setup() {
                const class1 = ref('class1')
                const class2 = ref('class2')
                const isClass2 = ref(true)
                const class4 = ref('class4')
                return {
                    class1,
                    class2,
                    isClass2,
                    class4
                }
            }
        }).mount('#app')
    </script>
</body>

style 绑定

绑定对象

我们可以传给 v-bind:style (简写为 :style) 一个对象

单文件组件

<template>
  <!-- 给 :style 传递一个对象 -->
  <div :style="{ color: color1, fontSize: '20px' }">盒子1</div>
  <!-- 也可以直接绑定一个对象 -->
  <div :style="styleObj">盒子2</div>
  <!-- 可以绑定一个返回对象的计算属性 -->
  <div :style="styleObj1">盒子3</div>
</template>

<script setup>
import { ref, computed } from 'vue'
const color1 = ref('red')
const styleObj = ref({
  color: 'pink',
  fontSize: '30px',
})
const styleObj1 = computed(() => ({
  color: 'blue',
  fontSize: '40px',
}))
</script>

HTML

<body>
    <div id="app">
        <!-- 给 :style 传递一个对象 -->
        <div :style="{ color: color1 , fontSize: '20px'}">盒子1</div>
        <!-- 也可以直接绑定一个对象 -->
        <div :style="styleObj">盒子2</div>
        <!-- 可以绑定一个返回对象的计算属性 -->
        <div :style="styleObj1">盒子3</div>
    </div>
    <script type="module">
        import { createApp, ref, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            setup() {
                const color1 = ref('red')
                const styleObj = ref({
                    color: 'pink',
                    fontSize: '30px',
                })
                const styleObj1 = computed(() => ({
                    color: 'blue',
                    fontSize: '40px',
                }))
                return {
                    color1,
                    styleObj,
                    styleObj1,
                }
            }
        }).mount('#app')
    </script>
</body>

绑定数组

可以把一个样式对象数组传给 v-bind:style (简写为 :style)，以应用多个样式对象

单文件组件

<template>
  <!-- 给 :style 传递一个数组 -->
  <div :style="[styleObj, styleObj1]">盒子1</div>
</template>

<script setup>
import { ref, computed } from 'vue'
const styleObj = ref({
  color: 'pink',
  fontSize: '30px',
})
const styleObj1 = computed(() => ({
  backgroundColor: 'blue',
  width: '100px',
}))
</script>

HTML

<body>
    <div id="app">
        <!-- 给 :style 传递一个数组 -->
        <div :style="[styleObj,styleObj1]">盒子1</div>
    </div>
    <script type="module">
        import { createApp, ref, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            setup() {
                const styleObj = ref({
                    color: 'pink',
                    fontSize: '30px',
                })
                const styleObj1 = computed(() => ({
                    backgroundColor: 'blue',
                    width: '100px',
                }))
                return {
                    styleObj,
                    styleObj1,
                }
            }
        }).mount('#app')
    </script>
</body>

自动添加前缀

当 :style 使用需要添加浏览器引擎前缀的 CSS 属性时，Vue 会自动侦测并添加相应的前缀

样式多值

可以为 :style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

单文件组件

<template>
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">盒子</div>
</template>

HTML

<div id="app">
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">盒子</div>
</div>

数组仅会渲染浏览器支持的最后一个值

组件中使用

详见：透传 Attributes

昵称

邮箱

网址

按正序
按倒序
按热度

Vue 类与样式绑定

预览: