vue binding style

Using ternary operator binding style

Originally thought to use vue templates written in binding a single style, which is a class when the class name can be written directly, like this

<div id="app">
  <div v-bind:class="{ isActive ? 'active': 'open'}"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

The result of running out is wrong, find a reason for a long time, only to find that the following wording should be

  <div v-bind:class="[ isActive ? 'active': 'open']"></div>

Only right thing
or so

<div v-bind:class="isActive ? 'active': 'open'"></div>

It can be so

<div :class="isActive ? 'active': 'open'"></div>

At last

Vue.js will be limited to a binding expression expression. If more than a logical expression, it should be calculated using properties. That is computed.
is the same method and the computed results, but is computed based vue dependent cache, will be re-evaluated only if its dependencies change. The use of methods, re-rendering, the function will always be re-called.

Using ternary operator binding style

At last

Guess you like