# 切換class
## 基礎運用
在以往動態的加入class的方式、我們在vue中也可以輕鬆加入並切換
* 先在setup中運用ref定義一個布林值開關
```javascript=
const isSet = ref(true);
```
* 也定義點擊後事件切換按鈕、在value中不等於 true 或 flase
```javascript=
// 定義點擊後開關按鈕
const clickOPen = () => {
isSet.value = !isSet.value;
}
```
* 將這些值 回傳至html中
```javascript=
return {
listArr, isSet, clickOPen
};
```
* 在點擊title中、加入@click 函式
```htmlembedded=
<a class="title" @click="clickOPen">課程列表</a>
```
* 並在class中 加入切換的class綁定資料、顯示定義好的open class
```htmlembedded=
<ul class="box" :class="{open:isSet}">
```
> 完成架構
```javascript=
<div id="app">
<a class="title" @click="clickOPen">課程列表</a>
<ul class="box" :class="{open:isSet}">
<li v-for="(list, idx) in listArr" :key="list.name">
{{idx + 1}}. {{list.name}}
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
const { ref,reactive } = Vue;
const App = {
setup() {
const listArr = reactive([
{ name: "2020 Vue3 專業職人 | 入門篇" },
{ name: "2020 Vue3 專業職人 | 加值篇" },
{ name: "2020 Vue3 專業職人 | 進階篇" },
{ name: "現代 JavaScript 職人之路｜入門篇" },
{ name: "現代 JavaScript 職人之路｜中階實戰篇" },
]);
// 定義點擊後開關按鈕
const clickOPen = () =>{
isSet.value = !isSet.value;
}
//定義一個開關
const isSet = ref(true);
return {
listArr, isSet, clickOPen
};
},
};
Vue.createApp(App).mount("#app");
</script>
```
## ==class中 有別的class 混合用法==
* 如果有class中有別的class的話、就要用陣列方式包覆物件方式傳遞、第一個值為原本屬性
```htmlembedded=
<!-- 第一個值為原本屬性 -->
<ul :class="['box',{open:isSet}]">
```
{"metaMigratedAt":"2023-06-16T11:41:55.275Z","metaMigratedFrom":"YAML","title":"切換class","breaks":true,"contributors":"[{\"id\":\"c05b36ac-d774-4e45-8fc3-5e50c9be5123\",\"add\":1762,\"del\":0}]"}