Vue, как использовать опору в качестве имени класса

Иногда вы передаете опору компоненту и хотите использовать это значение опоры в качестве имени класса. Как это сделать?

Скажем, у вас есть компонент "Автомобиль".

Вы хотите добавить класс к его выходным данным на основе опоры.

Так может быть реквизит называетсяcolor, и вы используете это в других частях приложения:

<Car color="red">
<Car color="blue">

В компоненте Car вам сначала нужно объявить свойство color:

<script>
export default {
  name: 'Car',
  props: {
    color: String
  }
}
</script>

тогда вы можете использовать его в части шаблона:

<template>
  <div :class="color"></div>
</template>

Если вы хотите добавитьcarclass, плюс класс, определяемый опцией цвета, вы можете использовать этот синтаксис:

<template>
  <div :class="['car', color]"></div>
</template>

Удачного кодирования!

Скачать мою бесплатнуюСправочник по Vue