How does vue add different styles according to the property values of array objects?

add the code first, such as the title. Add different background colors to p according to its content. I"ve been doing it for a long time, but I don"t know how to do it.

<table cellSpacing=0 cellPadding=0 id="right_table2" class="table table-bordered">
              <tr v-for="item in data4" >
                <td>{{item.gonghangId}}</td>
                <td>{{item.jianhangId}}</td>
                <td>{{item.nonghangId}}</td>
                <td>{{item.zhonghangId}}</td>
                <td>{{item.zhaoshangId}}</td>
                <td>{{item.jiaohangId}}</td>
                <td>{{item.pufaId}}</td>
                <td>{{item.guangdaId2}}</td>
                <td>{{item.guangdaId}}</td>
              </tr>
            </table>

data4: [
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
          {regions: "", gonghangId: "", jianhangId: "", nonghangId: "", zhonghangId: "", zhaoshangId: "", shuangyouId:""},
        ]

Vue.js

Mar.28,2021

var colors = { '':'-sharp333', '':'-sharp444', //... }, keys = ['gonghangId','jianhangId','nonghangId','zhonghangId','zhaoshangId','jiaohangId','pufaId','guangdaId2','guangdaId'] <tr v-for="item in data4" > <td v-for="(key,i) in keys" :key='i'><p :style={backgroundColor:colors[item[key]] || 'none'}>{{item[key]}}</td> </tr>

<tr v-for="item in data4" style="background-color: antiquewhite" > <td :class=color(item.gonghangId)><p >{{item.gonghangId}}</td> <td :class=color(item.jianhangId)><p >{{item.jianhangId}}</td> <td :class=color(item.nonghangId)>{{item.nonghangId}}</td> <td :class=color(item.zhonghangId)>{{item.zhonghangId}}</td> <td :class=color(item.zhaoshangId)>{{item.zhaoshangId}}</td> <td :class=color(item.shuangyouId)>{{item.shuangyouId}}</td> <td :class=color(item.jiaohangId)>{{item.jiaohangId}}</td> <td :class=color(item.pufaId)>{{item.pufaId}}</td> <td :class=color(item.guangdaId2)>{{item.guangdaId2}}</td> <td :class=color(item.guangdaId)>{{item.guangdaId}}</td> </tr>

color:function (val) { if(val==""){ return 'test_color'; }else if(val==''){ return 'tfl_color' }else if(val==''){ return 'xylz_color' }else if(val==''){ return 'bzr_color' }else if(val==''){ return 'bhz_color' }else if(val==''){ return 'ycd_color' }else { } }