Why v-bind:class not working?

Question

I'm learning v-bind:class in VueJS but I've encountered some problems with it. Here are my code

 var myApp = new Vue({ el: "#result", data: { isActive: true } });

 .red { color: red }

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> <div id="result"> <p v-bind:class="{red: isActive}">Hello</p> </div>

Was there any problems with my code above? As I want the result to be

<div class="red"></div>

Thanks in advance!

Answer 1

It works perfectly, see the codepen example:

https://codepen.io/martiensk/pen/boBPKQ

The generated code is:

<div id="result">
    <p class="red">Hello</p>
</div>

The problem is not with your Vue code, but elsewhere.

Answer 2

 var myApp = new Vue({ el: "#result", data: function(){ return { isActive: true } } });

 .red { color: red }

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> <div id="result"> <div v-bind:class="{red: isActive}">Hello</div> </div>

---

Data only accepts Function when used in a component definition.

data: function(){
    return {
        isActive: true
    }
}

https://v2.vuejs.org/v2/api/#Options-Data

Answer 3

Please Run this code on JsFiddle Online Editor. Link

<div id="app">
   <div class="box" :class="{bgColor: attache}" @click="attache = !attache">
     <p class="text" :class="{'txt-color': attache}">
       3
     </p>
   </div>
</div>

CSS Code

.box {
  height: 70px;
  width: 70px;
  background-color: green;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  cursor: pointer;
}

.text {
  font-size:18px;
  color: white;
}

.bgColor {
  background-color: #e8eaed;
}

.txt-color {
  color: #000;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    attache: false
  }
})

Answer 4

Clear you cache it will work perfectly.

Check it in Browser Incognito Mode.