根據後臺值不一樣css不一樣的解決方法

今天寫vue時，有個根據後臺值不一樣css不一樣的問題，用v-bind實現，結果沒成功，在網上找也沒找出結果，因而用了for循環、v-if判斷也能實現，大概代碼以下：

 1 <div class="row" style="width:1560px">
 2                            <div class="col-md-3 text-center windlist windbor1" v-for="item in listarr" v-if="item.st == 1">
 3                                    <i class="glyphicon glyphicon-globe text-center listphotoo"></i>
 4                                    <p class="text-center windp">{{item.name}}</p>
 5                                    <p class="text-center windptwo">{{item.add}}</p>
 6                            </div>
 7                        　　 <div class="col-md-3 text-center windlist windbor2" v-for="item in listarr" v-if="item.st == 2">
 8                                    <i class="glyphicon glyphicon-globe text-center listphotot" ></i>
 9                                    <p class="text-center windp">{{item.name}}</p>
10                                    <p class="text-center windptwo">{{item.add}}</p>
11                            </div>
12                            <div class="col-md-3 text-center windlist windbor3" v-for="item in listarr" v-if="item.st == 3">
13                                    <i class="glyphicon glyphicon-globe text-center listphototh" ></i>
14                                    <p class="text-center windp">{{item.name}}</p>
15                                    <p class="text-center windptwo">{{item.add}}</p>
16                            </div>
17</div>

vue代碼
export default{
    data(){
        return {
            showfireNav:true,
            listarr:[{st:1,name:'1',add:'5F'},{st:2,name:'1',add:'5F'},{st:3,name:'1',add:'5F'},{st:1,name:'1',add:' 5F'}],
            mun:'1',
        }
    },

css代碼
.windbor1{border:1px solid #2DCB73;}
.windbor2{border:1px solid #FC2E37;}
.windbor3{border:1px solid #9A9D9B;}
.listphotoo{color: #2DCB73;}
.listphotot{color: #FC2E37;}
.listphototh{color: #9A9D9B;}

 

三種狀況都寫了出來而後循環，實現了，可是代碼有點累贅，又琢磨起v-bind

後面發現v-bind：class=「{className：條件}」中，多個語句之間用逗號，以前用了分號因而沒出來，代碼以下

<div class="row" style="width:1560px">
                           <div class="col-md-3 text-center windlist" v-for="item in listarr" 
                               :class="{windbor1:item.st==1,windbor2:item.st==2,windbor3:item.st==3}">
                                   <i class="glyphicon glyphicon-globe text-center " 
                                    :class="{listphotoo:item.st==1,listphotot:item.st==2,listphototh:item.st==3}"></i>
                                   <p class="text-center windp">{{item.name}}</p>
                                   <p class="text-center windptwo">{{item.add}}</p>
                           </div>
</div>

vue代碼，css樣式沒有改動，就是v-if和v-bind的應用。