Question

如何使用leavehr.is_read_hr =='0'中的数据作为示例与条件进行v绑定以更改表行的bgcolor。

  <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

查看class and style bindings的文档。可以有条件地添加类：

<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>

您可能希望使用computed property将leavehr.hr映射到人类可读的值。

使用v-bind和条件方法更改背景颜色

1 个答案: