Иногда вы передаете опору компоненту и хотите использовать это значение опоры в качестве имени класса. Как это сделать?
Скажем, у вас есть компонент "Автомобиль".
Вы хотите добавить класс к его выходным данным на основе опоры.
Так может быть реквизит называетсяcolor
, и вы используете это в других частях приложения:
<Car color="red">
<Car color="blue">
В компоненте Car вам сначала нужно объявить свойство color:
<script>
export default {
name: 'Car',
props: {
color: String
}
}
</script>
тогда вы можете использовать его в части шаблона:
<template>
<div :class="color"></div>
</template>
Если вы хотите добавитьcar
class, плюс класс, определяемый опцией цвета, вы можете использовать этот синтаксис:
<template>
<div :class="['car', color]"></div>
</template>
Удачного кодирования!
Скачать мою бесплатнуюСправочник по Vue
Больше руководств по vue:
- Обзор Vue.js
- Интерфейс командной строки Vue.js: узнайте, как его использовать
- Инструменты разработчика Vue.js
- Настройка VS Code для разработки Vue
- Создайте свое первое приложение с Vue.js
- Однофайловые компоненты Vue.js
- Шаблоны и интерполяции Vue.js
- Директивы Vue.js
- Методы Vue.js
- Вычисляемые свойства Vue.js
- Стилизация компонентов Vue.js с помощью CSS
- Наблюдатели Vue.js
- Методы Vue против наблюдателей против вычисляемых свойств
- Фильтры Vue.js
- Компоненты Vue.js
- Слоты Vue.js
- Свойства компонента Vue.js
- События Vue.js
- Связь компонентов Vue.js
- Vuex, государственный менеджер Vue.js
- Vue, используйте компонент внутри другого компонента
- Vue, как использовать опору в качестве имени класса
- Как использовать SCSS с однофайловыми компонентами Vue.js
- Использование Tailwind с Vue.js
- Маршрутизатор Vue
- Динамически отображать компонент Vue
- Шпаргалка по Vue.js
- Храните данные Vue в localStorage с помощью Vuex
- Как динамически применять класс с помощью Vue
- Vue, как использовать v-модель
- Vue, почему данные должны быть функцией
- Roadmap to become a Vue.js developer in 2020