Изменение цвета фона с помощью v-bind с методом условия

Question

Как выполнить v-bind с условием изменить bgcolor строки моей таблицы, используя мои данные в виде lefthr.is_read_hr == '0'.

  <template v-for="leavehr in leaveshr">
      <tr class="even">
         <td><input type="checkbox" class="Leavesub_chk" name="ids[]"  :data- 
           id="leavehr.leave_id"></td>
         <td class="tr_">@{{leavehr.lastname}}, @{{leavehr.firstname}}</td>
         <td>@{{leavehr.leave_start}}</td>
         <td>@{{leavehr.duration}} Day(s)</td>
         <td>
            <h4>
            <span v-if="leavehr.head == 'approved'"class="label-default label label- 
             success">Approved</span>
            <span v-else-if="leavehr.head == 'pending'"  class="label-default label 
             label-warning">Pending</span>
            <span v-else="leavehr.head == 'pending'"  class="label-default label 
             label-danger">Rejected</span>
            </h4>
        </td>
        <td>
            <h4>
              <span v-if="leavehr.hr == 'approved'"class="label-default label label- 
               success">Approved</span>
              <span v-else-if="leavehr.hr == 'pending'"  class="label-default label 
               label-warning">Pending</span>
              <span v-else="leavehr.hr == 'pending'"  class="label-default label 
               label-danger">Rejected</span>
            </h4>
       </td>
       <td>
         <a :href="'ViewsLeave/' + leavehr.leave_id" class="view-modal btn 
         btn-info btn-sm">
          view
            </a>
      </td>
     </tr>
    </template> 

Мне труднорешить это.Я не очень хорошо использую vue.js.Я не знаю, какой из них я бы использовал.V-IF или V-BIND.Что я действительно хочу изменить цвет, когда его не читают.Так что бэкэнд сделан.только внешний интерфейс для изменения цвета.

Answer 1

Ознакомьтесь с документацией для привязок классов и стилей . Классы могут быть добавлены условно:

<span class="label-default label"
 v-bind:class='{ "success": leavhr.hr == "label-success", "pending": leavhr.hr == "label-warning", "rejected": leavehr.hr == "label-danger" }'
 >{{leavehr.hr}}</span>

Вы можете использовать вычисляемое свойство для отображения leavehr.hr в удобочитаемое значение.