---
# System prepended metadata

title: 切換class
tags: [Mike課程]

---

---
tags:  Mike課程
---

# 切換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}]">
```