根据后台值不同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的应用。

posted @ 2017-08-14 17:35  candy/  阅读(783)  评论(0)  编辑  收藏  举报