Vue along with online learning style of binding

class property

Bird found a piece of code from a tutorial, easy to confuse
the style style added:

.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}

Add the code in the body:

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>

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

Results Figure:

• Why start a very tangled red green cover and tried many methods, suddenly remembered the " principle of proximity ", and then I tried to change my style of sequential style, the result was successful. ( Novice should pay attention to )

---

In addition, when vue by setting class, you can also pass through the object value of
certain birds tutorial to say:

<div v-bind:class="classObject"></div>

new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})

---

Array Settings class

//body中
<div v-bind:class="[activeClass, errorClass]"></div>
//script中
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})

Set class type three yuan

//body中
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
//script中
new Vue({
  el: '#app',
  data: {
    isActive: true,
	activeClass: 'active',
    errorClass: 'text-danger'
  }
})

Setting style

1. Normal setting style

//body内
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">教程</div>

//script内
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})

2. Single style object set style

//body内
 <div v-bind:style="styleObject">教程</div>
//script内
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})

3. More style object set style

//body内
 <div v-bind:style="[baseStyles, overridingStyles]">教程</div>
 //script内
 new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})

Note : When the v-bind: style when using a specific prefix CSS properties required, such as transform, Vue.js will automatically detect and add the appropriate prefixes.