I starting with Vue and have a div that does not behave like it should. I would appreciate if someone could explain it :

<div id="static" v-bind:><p>tralala</p></div>

The vue script looks like this:

var watchExampleVM = new Vue({
  el: '#static',
  data: {
      classObject: {
        active: true,
        'text-danger': true
    }
  }
  
})

My expectation is that tralala would be highlighted in red but it is not. The resulting html code is for my div .

CodePudding user response：

You should add the CSS rules to the used classes like :

var watchExampleVM = new Vue({
  el: '#static',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }

})

.text-danger {
  color: red
}

.active {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="static" v-bind:class="classObject">
  <p>tralala</p>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>