Vue 绑定class的几种形态

Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。

形态一：常规形态

<template>  
    <div :class="className"></div>
</template>

<script setup>
    const className = 'text-primary'
</script>

 

形态二：逐个对象结构绑定

<template>    
    <div  class="static"  :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

<script setup>
    const isActive = true
    const hasError = false
</script>

  

形态三：整体对象结构绑定

<template>    
    <div :class="classObject"></div>
</template>

<script setup>
    const classObject = {
        active: true,
        'text-danger': false
    }
</script>

 

形态四：计算属性绑定

<template>    
    <div :class="classObject"></div>
</template>

<script setup>
    import {computed, ref} from 'vue'

    const  isActive = ref(true)
    const error = ref({
        type: '',
        msg: ''
    })

    const classObject = computed(() => ({
        active: isActive.value && !error.value,
         'text-danger': error.value && error.value.type === 'fatal'
    }))
</script>

 

形态五：数组结构绑定

<template>    
    <div :class="[activeClass, errorClass]"></div>
</template>

<script setup>
    const activeClass = 'active'
    const errorClass = 'text-danger'
</script>

<template>    
    <div :class="[isActive ? activeClass : '', errorClass]"></div>
</template>

<script setup>
    const isActive  = true
    const activeClass = 'active'
    const errorClass = 'text-danger'
</script>

<template>    
    <div :class="[{ active: isActive }, errorClass]"></div>
</template>

<script setup>
    const isActive  = true
    const errorClass = 'text-danger'
</script>