Блог

Главная - Вопросы по программированию - Динамически добавляйте класс css в тег span, когда для текста установлено значение «Завершено» с помощью Vue.js

Динамически добавляйте класс css в тег span, когда для текста установлено значение «Завершено» с помощью Vue.js

#css #vue.js #class

#css #vue.js #класс

Вопрос:

У меня есть список файлов, готовых к загрузке, со статусом «Ожидание»:

 <ul class="list-group">
<li class="list-group-item" v-for="file in uploadedFiles">
    {{ file.fileName }}
    <span class="badge">{{file.uploadStatus}}</span>
    </li></ul>

когда статус загрузки файла изменяется на «Завершено», я хочу динамически добавлять класс «badge-success» в тег span.
Я просмотрел документацию vue и попытался добавить это в тег span:

 <span class="badge" v-bind:class="'badge-success': file.uploadStatus == 'Completed'">{{file.uploadStatus}}</span>

Я даже пробовал некоторые другие комбинации (измененный текст, новое свойство данных), но безрезультатно.

Итак, как я могу добавить другой класс в тег span при изменении текста статуса загрузки файла? Любой совет был бы весьма признателен.

Комментарии:

1. : класс должен быть объектом. Вам просто не хватает скобок внутри двойных кавычек.

2. Да, я пропустил скобки. Спасибо за это.

Ответ №1:

Из документации Vue:

Мы можем передать объект в v-bind:class для динамического переключения классов

Итак, вы должны сделать это следующим образом:

 <span
  class="badge"
  v-bind:class="{'badge-success': file.uploadStatus == 'Completed'}"
>
  {{file.uploadStatus}}
</span>
Метки: