<script setup lang="ts">
 const list = [
   {
     id: "1",
     name: "name1",
     isActive: true,
   },
   {
     id: "2",
     name: "name2",
     isActive: false,
   },
   {
     id: "3",
     name: "name3",
     isActive: false,
   },
 ];
 </script>
 <template>
   <div
     v-for="item in list"
     :key="item.id"
     class="common"
     :class="{ isActive: item.isActive }" 
   >
     {{ item.name }}
   </div>
 </template>
 <style>
 .isActive {
   color: red;
 }
 </style>

 <script setup lang="ts">
 import { ref } from "vue";
 const isActive = ref<boolean>(false);
 // 事件改變 data 屬性值  
 const btn = () => {
   isActive.value = !isActive.value;
 };
 </script>
 <template>
   <div class="common" :class="{ isActive: isActive }">文字說明</div>
   <button @click="btn">改變樣式</button>
 </template>
 <style>
 .common {
   font-size: 20px;
 }
 .isActive {
   color: red;
 }

 <script setup lang="ts">
 import { reactive } from "vue";
 const classObj = reactive({
   isActive: true,
   hasError: false,
   textRed: true,
 });
 </script>
 <template>
   <div class="common" :class="classObj">文字說明</div>
 </template>

 <script setup lang="ts">
 import { ref } from "vue";
 const activeClass = ref("active");
 const errorClass = ref("text-danger");
 </script>
 <template>
   <div :class="[activeClass, errorClass]"></div>
 </template>

 <div class="active text-danger"></div>

 <!--三目運(yùn)算符的判斷-->
 <div :class="[isActive ? activeClass : '', errorClass]"></div>
 <!--數(shù)組中嵌套對(duì)象的判斷-->
 <div :class="[{activeClass: isActive}, errorClass]"></div>

 <!--vue2: 錯(cuò)誤的寫法-->
 <template>
   <div></div>
   <div></div>
 </template>
 <!--vue3: 正確-->
 <template>
   <div></div>
   <div></div>
 </template>

 <!--son子組件-->
 <template>
   <div class="own">son組件</div>
 </template>

 <!--父組件使用Son-->
 <Son class='abc' />

 <div class='abc own'>son組件</div>

 <!--son子組件-->
 <template>
   <div class="own">son組件1</div>
   <div class="own">son組件2</div>
 </template>

 <!--父組件使用Son-->
 <Son class='abc' />

 <!--son子組件-->
 <template>
   <div class="own" :class="$attrs['class']">son組件1</div>
   <div class="own">son組件2</div>
 </template>

 <div class="own abc">son組件1</div>
 <div class="own">son組件2</div>

 <!--子組件Son-->
 <script setup lang="ts">
 const btn1 = () => {
   console.log("子組件的點(diǎn)擊事件");
 };
 </script>
 <template>
   <button @click="btn1">點(diǎn)擊</button>
 </template>

 <!--父組件使用-->
 <script setup lang="ts">
 import Son from "./Son.vue";
 const btn = () => {
   console.log("父組件的點(diǎn)擊事件");
 };
 </script>
 <template>
   <Son @click="btn" />
 </template>

 <!--baseChild-->
 <template>
   <div></div>
 </template>
 <!--child-->
 <template>
   <base-child />
 </template>
 <!--father-->
 <Child class='abc'/>

 <div class='abc'></div>

 <!--如果是setup寫法，就需要單獨(dú)添加一個(gè)script標(biāo)簽，暴露一個(gè)配置對(duì)象-->
 <script lang="ts">
 export default {
   inheritAttrs: false, // 禁用
 };
 </script>
 <script setup lang="ts">
 const btn1 = () => {
   console.log("子組件的點(diǎn)擊事件");
 };
 </script>
 <template>
   <button @click="btn1">點(diǎn)擊</button>
 </template>