vue中，如何根据坐标给v-for渲染出来的表格添加样式

Question

比如说后台数据返回的是（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>

Answer 1

有多种方法：
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>

1. 使用 :style绑定样式

<div v-bind:class="{ class1: 状态 ===1, class2: 状态 ===2, class3: 状态 ===3,  }"></div>