Vue 2.7 class and inline style binding syntax and patterns.

Class Style Biding

Class binding

v-bind:class="{ className: condition }"

Có nghĩa:

{
  tên_class_css: điều_kiện_boolean
}

trong vue

<div v-bind:class="{ class: isActive }">

Vue hiểu:

Nếu isActive === true
→ thêm class "class"

Nếu isActive === false
→ không thêm class "class"

Code ví dụ:

HelloComponent.vue

<div :class="{ active: isActive }">
  Hello
</div>

export default {
  data() {
    return {
      isActive: true
    }
  }
}

Ví dụ nhiều class:

<div :class="{
  active: isActive,
  danger: hasError,
  hidden: isHidden
}">
</div>

// data
data() {
  return {
    isActive: true,
    hasError: false,
    isHidden: true
  }
}

// ket qua
<div class="active hidden"></div>

Các kiểu binding class

String syntax

<div :class="'active'"></div>

Object syntax:

<div :class="{ active: isActive }"></div>

Array Syntax:

<div :class="[activeClass, errorClass]"></div>

// data
data() {
  return {
    activeClass: 'active',
    errorClass: 'danger'
  }
}

// kq
<div class="active danger"></div>


// mix
<div :class="[
  activeClass,
  { danger: hasError }
]">
</div>

Class Style Biding#

#Class binding

#Các kiểu binding class

Class Style Biding

Class binding

Các kiểu binding class