Атрибут class в фреймворке Vue

Работа с атрибутом class происходит через директиву v-bind или ее сокращенную форму. Давайте посмотрим на практике. Пусть в свойстве str хранятся CSS классы тега, разделенные пробелами:

javascriptdata() {
  return {
    str: 'active valid',
  }
}

Добавим эти CSS классы в какой-нибудь тег:

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