1<div  :class="{'collapse':true , 'show' : key == 0 ? true : false }">
2           
3</div>

1<template>
2  <span :class="computedClass">
3    We've learned so much about conditional class bindings!
4  </span>
5</template>
6
7
8
9export default {
10  computed: {
11    computedClass() {
12      let className = 'default';
13
14      // More complicated logic to determine what
15      // class should be applied
16
17      return className;
18    }
19  }
20}

1new Vue({
2  el: "#app",
3  data: {
4    items: [
5      { label: 'foo', status: true },
6      { label: 'bar', status: false }
7    ]
8  }
9})
10.text-red {
11  color: red;
12}
13<script src="https://cdn.jsdelivr.net/npm/vue"></script>
14
15<div id="app">
16  <p v-for="item in items" v-bind:class="{ 'text-red': item.status }">
17    {{item.label}}
18  </p>
19</div>