Мне нужно сделать цвет фона синим, если элемент текущий (bg-blue-400), зеленый фон (bg-green-400) — завершенный, темный (bg-dark-400) — незавершенный (можно активировать только один). Пример того, что я хочу:
Мой код:
<div v-bind:class="{'bg-blue-400' : isSelected(task), 'bg-grey-400' : isNotCompleted(task)}"
class="icon-block s30 text-white" >{{index+1}}</div>
Результат:
Поместите такую логику в свой тег script, а не в свой шаблон.
В зависимости от типа поведения, которое вы хотите, вам нужно выбрать между помещением вашей логики в вычисляемое свойство или метод. (задайте себе вопрос: хотите ли вы, чтобы класс css менялся при изменении вашей задачи? Если это так, используйте вычисляемое свойство, иначе используйте метод)
Еще одно улучшение (поскольку вы используете v-for) состоит в том, чтобы поместить ваши индивидуальные задачи в компонент.
Компонент задач:
<task v-for="task in tasks" :task="task"></task>
Компонент задачи:
<template>
<div v-bind:class="cssClass">
<p> {{ task.name }} </p>
</div>
</template>
<script>
computed: {
cssClass: function () {
return {
'bg-blue-400' if this.task.selected
}
}
}
</script>
isNotCompleted(task)"с помощьюisNotCompleted(task) }"- person Happyriri schedule 05.04.2017isSelectedиisNotCompleted? - person Happyriri schedule 05.04.2017