Issue
Basicly i have a div, and want to do a exercise where i apply 3 diferent classes using vue.js, to do that i try to use v-bind:class, more precise :class, can i bind a class directly from css?
I did something like that
html
<div :style="[myClass1,myClass2,myClass3]">I got no class :(</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);
}
}
});
so if i can't bind the classes directly how can i do that with vue.js?
Solution
You bind styles to style
and classes to class
. In the html example, you are trying to bind classes to style
Also, the way you are listing the classes, they are pointing to values that are not present in the js example. You should either add them in data
or wrap them with quotes: <div :class="['myClass1','myClass2','myClass3']">Yay, classes!</div>
Read more in the docs.
Answered By - 4140tm
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.