vue动态类名的几种方式

1，
<div class="item" :class="{ 'active-tab': activeTab === i.name }" v-for="i in tabList" :key="i.name">
{{ i.name }}
</div>
// active-tab为类名 单独写样式
 用符号连接时要加'' 满足activeTab === i.name时 class类名使用active-tab

2，
<div class="my-list" :class="{ special: userType === '02' }"></div>
// special为类名 单独写样式
 单独单词则不需要加'' 满足userType === '02'时 class类名使用special

3，
// 通过类名传值 控制样式 
// 子组件
<div class="cps-my-default-tab-container" :class="{ 'border-top-style': borderTopStyle, 'border-top-left-radius': borderRadiusTop }"></div>
// border-top-style 类名 单独写样式
// borderTopStyle 为true时 class使用border-top-style
//父组件
eg: <my-default-tab :borderTopStyle="true" />
 // 此时 borderTopStyle 为true 父组件内class使用border-top-style

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  borderTopStyle: {
    type: Boolean,
    default: false
  },
  borderRadiusTop: {
    type: Boolean,
    default: false
  }
})
</script>

以上为动态类名的基本使用方式，还请大佬多多指教！