Essentially, I have a div and I want to create an exercise where I apply three different classes using vue.js. I attempted to use v-bind:class, specifically :class, but can I bind a class directly from CSS?
This is what I tried:
html
<div :style="[myClass1, myClass2, myClass3]">I have no class applied :( </div>
css
.myClass1 {
background-color: black;
width: 200px !important;
height: 200px !important;
}
.myClass2 {
border: 2px solid red;
}
.myClass3 {
padding: 2px 2px 2px 2px;
}
Javascript
new Vue({
el: '#exercise',
data: {
effect: true,
},
methods: {
startEffect: function() {
var vm = this;
setInterval(function(){
vm.effect = !vm.effect;
console.log(this.effect);
},1000);
}
}
});
If I cannot bind the classes directly, how can I achieve this with vue.js?