Аб'ект з CSS класамі ў Vue

CSS класы могуць таксама захоўвацца ў аб'ектах. Пры гэтым імёны класаў будуць ключамі аб'екта, а элементамі аб'екта будуць лагічныя значэнні. Калі значэнне будзе true, то клас будзе дададзены элементу, а калі false, то не будзе.

Давайце паспрабуем на практыцы. Хай у нас ёсць наступны аб'ект з класамі:

javascriptdata() {
  return {
    obj: {
      active: true,
      valid:  false,
    },
  }
}

Прывяжем гэты аб'ект да тэга:

App.vue<template>
  <p :class="obj">text</p>
</template>

javascriptdata() {
  return {
    obj: {
      done: true,
      selected:  false,
    },
  }
}