Laravel + Vuejs:将表格行中的所有文本设置为红色/ text -danger

Question

我使用的是v-if和v-else。如果罚款大于0，那么行中的整个文本必须是红色的？请问我们该怎么做？

我下面的代码可以工作，但它是一团糟。我不知道怎么清理它。或者也许有更好的方法呢？：

                <tr v-for="issue in issues" :key="issue.id">
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.firstname}} {{ issue.lastname}}</span></td>
                    <td v-else>{{ issue.firstname}} {{ issue.lastname}}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.description}}</span></td>
                    <td v-else>{{ issue.description}}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.dateloaned | myDate }}</span></td>
                    <td v-else>{{ issue.dateloaned | myDate }}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.datedue | myDate }}</span></td>
                    <td v-else>{{ issue.datedue | myDate }}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.daterenewed  | myDate }}</span></td>
                    <td v-else>{{ issue.daterenewed  | myDate }}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.datereturned }}</span></td>
                    <td v-else>{{ issue.datereturned }}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.fine }} </span></td>
                    <td v-else>{{ issue.fine }}</td>

                </tr>

Answer 1

您可以根据某些条件设置class。我会选择这样的方式：

                <tr v-for="issue in issues" :key="issue.id" :class="issue.fine > 0 ? 'text-danger font-weight-bold': ''">
                    <td>{{ issue.firstname}} {{ issue.lastname}}</td>
                    <td>{{ issue.description}}</td>
                    <td>{{ issue.dateloaned | myDate }}</td>
                    <td>{{ issue.datedue | myDate }}</td>
                    <td>{{ issue.daterenewed  | myDate }}</td>
                    <td>{{ issue.datereturned }}</td>
                    <td>{{ issue.fine }}</td>

                </tr>

您还可以使用以下命令：

<tr v-for="issue in issues" :key="issue.id" :class="{'text-danger font-weight-bold': issue.fine > 0}">...</tr>

在此处查看classes文档：https://vuejs.org/v2/guide/class-and-style.html