鍍金池/ 問(wèn)答/HTML/ vue 如何根據(jù)數(shù)組對(duì)象屬性值的不同，添加不同的樣式？

vue 如何根據(jù)數(shù)組對(duì)象屬性值的不同，添加不同的樣式？

先上代碼，問(wèn)題如標(biāo)題，根據(jù)p的內(nèi)容不同來(lái)為其添加不同顏色的背景顏色，自己弄了好久，不知道怎么搞了~

<table cellSpacing=0 cellPadding=0 id="right_table2" class="table table-bordered">
              <tr v-for="item in data4" >
                <td><p>{{item.gonghangId}}</p></td>
                <td><p>{{item.jianhangId}}</p></td>
                <td><p>{{item.nonghangId}}</p></td>
                <td><p>{{item.zhonghangId}}</p></td>
                <td><p>{{item.zhaoshangId}}</p></td>
                <td><p>{{item.jiaohangId}}</p></td>
                <td><p>{{item.pufaId}}</p></td>
                <td><p>{{item.guangdaId2}}</p></td>
                <td><p>{{item.guangdaId}}</p></td>
              </tr>
            </table>
data4: [
          {regions: '云南', gonghangId: '測(cè)試', jianhangId: '不準(zhǔn)入', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '談費(fèi)率', zhaoshangId: '測(cè)試', shuangyouId:''},
          {regions: '深圳', gonghangId: '談費(fèi)率', jianhangId: '已出單', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '測(cè)試', zhaoshangId: '測(cè)試', shuangyouId:'不準(zhǔn)入'},
          {regions: '黑龍江', gonghangId: '測(cè)試', jianhangId: '談費(fèi)率', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '測(cè)試', zhaoshangId: '', shuangyouId:'測(cè)試'},
          {regions: '江西', gonghangId: '測(cè)試', jianhangId: '談費(fèi)率', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '不合作', zhaoshangId: '已出單', shuangyouId:''},
          {regions: '山東', gonghangId: '測(cè)試', jianhangId: '不合作', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '測(cè)試', zhaoshangId: '談費(fèi)率', shuangyouId:'測(cè)試'},
          {regions: '湖南', gonghangId: '不準(zhǔn)入', jianhangId: '', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '測(cè)試', zhaoshangId: '已出單', shuangyouId:''},
          {regions: '青島', gonghangId: '測(cè)試', jianhangId: '', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '測(cè)試', zhaoshangId: '', shuangyouId:''},
          {regions: '廣東', gonghangId: '測(cè)試', jianhangId: '談費(fèi)率', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '測(cè)試', zhaoshangId: '已出單', shuangyouId:'測(cè)試'},
          {regions: '海南', gonghangId: '', jianhangId: '測(cè)試', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '不合作', zhaoshangId: '已出單', shuangyouId:''},
          {regions: '河南', gonghangId: '測(cè)試', jianhangId: '測(cè)試', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '', zhaoshangId: '談費(fèi)率', shuangyouId:'測(cè)試'},
          {regions: '河北', gonghangId: '測(cè)試', jianhangId: '測(cè)試', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '不合作', zhaoshangId: '測(cè)試', shuangyouId:'談費(fèi)率'},
          {regions: '上海', gonghangId: '測(cè)試', jianhangId: '測(cè)試', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '不合作', zhaoshangId: '測(cè)試', shuangyouId:'談費(fèi)率'},
          {regions: '江蘇', gonghangId: '測(cè)試', jianhangId: '測(cè)試', nonghangId: '協(xié)議流轉(zhuǎn)', zhonghangId: '不合作', zhaoshangId: '測(cè)試', shuangyouId:'談費(fèi)率'},
        ]

clipboard.png

回答
編輯回答
莓森

動(dòng)態(tài)綁定class https://cn.vuejs.org/v2/guide...

2017年5月4日 07:53
編輯回答
心癌

如果不是后臺(tái)給顏色的話，那么總要有一個(gè)標(biāo)準(zhǔn)把 某些什么顏色 某些什么顏色。如果有了標(biāo)準(zhǔn)，那么是不是就可以使用v-if來(lái)判斷呢

2017年2月8日 19:50
編輯回答
入她眼

如果返回的數(shù)據(jù)是固定的幾個(gè)，可以用配置的方式，寫個(gè)數(shù)據(jù)存儲(chǔ)顏色

var colors = {
    '測(cè)試':'#333',
    '已出單':'#444',
    //... 帶顏色的都可以配置在這里
},
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]}}</p></td>
</tr>
2018年2月11日 01:42
編輯回答
冷溫柔

自己也寫出來(lái)了，雖然很冗余，不過(guò)還是貼出來(lái)了，通過(guò)對(duì)比，收獲很多~

<tr v-for="item in data4" style="background-color: antiquewhite" >
    <td :class=color(item.gonghangId)><p >{{item.gonghangId}}</p></td>
    <td :class=color(item.jianhangId)><p >{{item.jianhangId}}</p></td>
    <td :class=color(item.nonghangId)><p>{{item.nonghangId}}</p></td>
    <td :class=color(item.zhonghangId)><p>{{item.zhonghangId}}</p></td>
    <td :class=color(item.zhaoshangId)><p>{{item.zhaoshangId}}</p></td>
    <td :class=color(item.shuangyouId)><p>{{item.shuangyouId}}</p></td>
    <td :class=color(item.jiaohangId)><p>{{item.jiaohangId}}</p></td>
    <td :class=color(item.pufaId)><p>{{item.pufaId}}</p></td>
    <td :class=color(item.guangdaId2)><p>{{item.guangdaId2}}</p></td>
    <td :class=color(item.guangdaId)><p>{{item.guangdaId}}</p></td>
  </tr>
      color:function (val) {
        if(val=="測(cè)試"){
          return 'test_color';
        }else if(val=='談費(fèi)率'){
          return 'tfl_color'
        }else if(val=='協(xié)議流轉(zhuǎn)'){
          return 'xylz_color'
        }else if(val=='不準(zhǔn)入'){
          return 'bzr_color'
        }else if(val=='不合作'){
          return 'bhz_color'
        }else if(val=='已出單'){
          return 'ycd_color'
        }else {
        }
      }
2017年5月19日 12:10