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>

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