Vue－動態 class 值

凡事都要動態。

簡述

假設我的元件資料長這樣：

const app = Vue.createApp({
  data() {
    return {
      users: [
        { name: 'PeaNu', age: 25, img: './assets/chung.jpeg', isOnline: false },
        { name: 'PPB', age: 24, img: './assets/ppb.png', isOnline: true },
        { name: 'ET', age: 999, img: './assets/badguy.jpeg', isOnline: false }
      ]
    }
  }
})

我希望在 isOnline 是 true 的時候加上特定的 class，可以用這種方式來寫：

<div id="app">
  <ul>
    <!-- user.isOnline = true 時加上 online 這個 class -->
    <li v-for="user of users" class="default" :class="{ online: user.isOnline }">
      <div>
        <img :src="user.img" :alt="user.name" />
      </div>
      <div>
        {{ user.name }} <br />
        {{ user.age }}
      </div>
    </li>
  </ul>
</div>

就是在 :class 傳入一個物件，key 就代表 className，value 則是用來的開關（true / false）。

順道一提如果你的 key 不是合法的輸入，像是 card-body 的話，記得要用「字串的形式」來填入。