Vue.js динамические классы
У меня есть html, использующий Vue.js здесь:
<div id = "app">
<ul class = "navbar-nav">
<li class = "nav-item" v-for = "tab in tabs">
<a href = "#" class = "nav-link">{{ tab.name }}</a>
</li>
</ul>
</div>
У меня здесь есть javascript:
var app = new Vue({
el: '#app',
data: {
tabs: [
{ name: "Home", active: "" },
{ name: "Challenges", active: "active" },
{ name: "Scoreboard", active: "" },
{ name: "About", active: "" }
]
}
});
Я хочу установить для класса tabs.active, поскольку я использую бутстрап. Как я могу это сделать?
Обновил выше.
—
10.12.2018 03:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
2
72
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Добавлять
v-bind:class = "tab.active"
Итак, ваш код должен выглядеть так:
var app = new Vue({
el: '#app',
data: {
tabs: [{
name: "Home",
active: ""
},
{
name: "Challenges",
active: "active"
},
{
name: "Scoreboard",
active: ""
},
{
name: "About",
active: ""
}
]
}
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "app">
<ul class = "navbar-nav">
<li class = "nav-item" v-for = "tab in tabs" v-bind:class = "tab.active">
<a href = "#" class = "nav-link">{{ tab.name }}</a>
</li>
</ul>
</div>Используйте привязка классов следующим образом:
<li class = "nav-item" :class = "{active: tab.active === 'active'}" v-for = "tab in tabs">
new Vue({
el: '#app',
data: {
tabs: [
{ name: "Home", active: "" },
{ name: "Challenges", active: "active" },
{ name: "Scoreboard", active: "" },
{ name: "About", active: "" }
]
}
});.active .nav-link {
color: white;
background: blue;
}<script src = "https://unpkg.com/[email protected]"></script>
<div id = "app">
<ul class = "navbar-nav">
<li class = "nav-item" :class = "{active: tab.active === 'active'}" v-for = "tab in tabs">
<a href = "#" class = "nav-link">{{ tab.name }}</a>
</li>
</ul>
</div>Другие вопросы по теме
Мне любопытно, почему "первый в своем роде" не работает
Как я могу получить innerText динамических тегов Html с помощью Puppeteer.js (node.js) в TripAdvisor?
Как установить фиксированную высоту для горизонтальной прокручиваемой веб-страницы по-другому, чем на устройствах?
Как поменять фон, чтобы поставить sizes.js?
Различные ссылки на веб-сайты на панели навигации
Отмените установку одного элемента из массива php, встроенного в html-сайт, с помощью кнопки JS
Выбор и ввод параметра VBA html
Класс btn не создает пространство между кнопками
Как добиться равномерного распределения навигационных ссылок по центру страницы?
Делаем центр встроенным блоком
Похожие вопросы
Nativescript - CSS страницы входа не работает
Хранение данных, полученных из API, в другом API - Ionic
Безопасна ли эта проверка файлов cookie?
Удалить строку из таблиц данных Vuejs
Ionic GeoPosition TypeError
Как выполнить javascript в теневых доменных / веб-компонентах?
LocalStorage хранит HTMLTextAreaElement вместо значения
Как изменить массив в js по ключу
Кросс-платформенный React Native против NativeScript
Как поменять фон, чтобы поставить sizes.js?
Где элемент с идентификатором приложения?