- vue中，如何根据坐标给v-for渲染出来的表格添加样式
-
比如说后台数据返回的是（1，A），状态为已入库，那我该如何将获取到的坐标对应图片的坐标，然后将图片li对应坐标的颜色改为已入库对应的绿色
表格代码如下：<table class="table-container am-active"> <tbody class="table-body-container" v-if="rows > 0 && columns > 0"> <tr v-for="rowidx in rows" :key="rowidx"> <td v-for="columnidx in columns" :key="columnidx" class="container-detail-td"> <div class="table-sample-big" @click="selfcllick(rows+1-rowidx,columnidx)"></div> </td> </tr> </tbody> </table>
有多种方法：
1. 用v-if来判断展示不同的标签
<div v-if="状态===1" class="table-sample-1" @click="selfcllick(rows+1-rowidx,columnidx)"></div>
<div v-if="状态===2" class="table-sample-2" @click="selfcllick(rows+1-rowidx,columnidx)"></div>
<div v-if="状态===3" class="table-sample-3" @click="selfcllick(rows+1-rowidx,columnidx)"></div>
- 使用 :style绑定样式
<div v-bind:class="{ class1: 状态 ===1, class2: 状态 ===2, class3: 状态 ===3, }"></div>
