-2
Try this:
new Vue({
el: "#app",
data: {
isExample: true,
},
created() {
setInterval(() => {
this.isExample = !this.isExample
}, 2000)
},
computed: {
parentClasses() {
return ['parent', this.isExample ? 'container' : null];
},
childClasses() {
return ['child', this.isExample ? 'example' : null]
}
}
})
.container {
background: tomato;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div :class="parentClasses">
parentClasses: {{parentClasses}}
<div :class="childClasses">childClasses: {{childClasses}}</div>
</div>
</div>
Source:stackexchange.com