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>