Vue — как добавить значение свойства в качестве значения класса в шаблон?

Вы можете легко добавлять пользовательские классы, привязывая строку, массив или объект к атрибуту класса. Вы начинаете с использования синтаксиса v-bind или : для привязки переменной к атрибуту class:

<template>
  <div :class = "classes">
    <!-- Magic! -->
  </div>
</template>

Затем в нашем компоненте экспорта мы можем сделать несколько вещей. Самый универсальный вариант – использовать объект. Если значение ключа истинно, применяется этот класс. Если значение ложно, оно не будет применено. Мы используем синтаксис [ keyName ]: value, чтобы добавить this.thrID в качестве ключа к нашему объекту.

export default {
  props: {
    thrID: {
      type: String,
      required: true
    }
  },
  computed: {
    classes () {
      return {
        hhhhh: true,
        [this.thrID]: true
      }
    }
  }
}

Точно так же вы можете вернуть массив:

classes () {
  return [
    'hhhhh',
    this.thrID
  ]
}

Или вы можете создать строку с классами:

classes () {
  return `hhhhh {$this.thrID}`
}