CODEWITHSUNDEEP
javascripthtmlcssvue.jsvuejs2
user7666392
user7666392

Reputation:

Apply multiple classes doesn't work properly

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?

Upvotes: 1

Views: 131

Answers (3)

Kyle P
Kyle P

Reputation: 152

Try this

<div v-bind:class="[myClass1,myClass2,myClass3]">I have your classes</div>

Please see documentation for details

Upvotes: 1

4140tm
4140tm

Reputation: 2088

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.

Upvotes: 1

Saurabh
Saurabh

Reputation: 73649

Check the documentation for array syntax of dynamic classes, you have to use v-bind:class in the code.

new Vue({
  el: '#exercise',
  data: {
    effect: true
  },
  methods: {
    startEffect: function() {
      var vm = this;
      setInterval(function(){
        vm.effect = !vm.effect;
        console.log(this.effect);
      },1000);
    }
  }
});
.myClass1 {
  background-color: red;
  width: 200px !important;
  height: 200px !important;
}

.myClass2 {
  border: 2px solid red;
}

.myClass3 {
  padding: 2px 2px 2px 2px;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="exercise">
<div v-bind:class="['myClass1','myClass2','myClass3']">I got no class :(</div>
</div>

Upvotes: 2

Related Questions