Vue 3中按条件设置HTML元素的class值，同时附加其他的class值
Le Mon 24 February 2025
姑娘想给一个HTML元素的class属性添加一些内容。这些内容有的是直接写死的，有的要按条件设置。 这时候，姑娘需要给这个元素添加两个class属性。这让姑娘惊异不已。
<template>
<div class="flex justify-between" :class="{'color-white': enableWhite, 'color-red': enableRed}">
</template>
<script setup>
import { ref } from 'vue'
const enableWhite = ref(false)
const enableRed = ref(true)
</script>
这样，可用达到div的class属性最终合并为一的效果。这样的写法真是不耐看。
上述写法渲染后，可能的几种结果：
<div class="flex justify-between"></div>
<div class="flex justify-between color-white"></div>
<div class="flex justify-between color-red"></div>
<div class="flex justify-between color-white color-red"></div>
样式class与v-if的结合使用：
<PaymentMethod class="p-1" v-if="selected" v-for="({icon, label}, index) in payment_via_list" :index="index" :icon="icon" :label="label" @click="payment_method_clicked"></PaymentMethod>
<PaymentMethod class="p-1" v-if="!selected" v-for="({icon, label}, index) in payment_via_list" :index="index" :icon="icon" :label="label" @click="payment_method_clicked"></PaymentMethod>
样式class与v-for的结合使用：
<PaymentMethod class="p-1" class="{'bg-white': selected}" v-for="({icon, label}, index) in payment_via_list" :index="index" :icon="icon" :label="label" @click="payment_method_clicked"></PaymentMethod>
写法杂乱，难言美观。