循环数据根据数据不同显示不同的class样式.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>指令</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .color1{
                color: red;
            }
            .gray{
                background: gray;
            }
            .blue{
                background: blue;
            }
            .green{
                background: green;
            }
        </style>
    </head>
    <body>
        
        <div class="" id="myVue">
            <!--方法一：：class里直接判断   -->
            <ul>
                <li v-for="item in items" :class="[ {'gray': item.styles=='gray'}, {'blue': item.styles=='blue'}, {'green': item.styles=='green'}]">{{item.name}}</li>
            </ul>
            <!--方法二:利用computed计算属性判断-->
            <ul>
                <li v-for="item in items" :class='timeBarType(item.styles)'>{{item.name}}</li>
            </ul>
        
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        
        var vm=new Vue({
            el:"#myVue",
            data:{
                
                items: [
                  { name: '张三' ,styles:"gray" },
                  { name: '李四' ,styles:"blue"},
                  { name: '王五' ,styles:"green"}
                ]
            },
            computed: {
                timeBarType() {
                    return function(type) {
                          if(type == "gray") {return 'gray'};
                        if(type == "blue"){return 'blue'} ;
                        if(type == "green"){return 'green'} ;
                    }
            
                }
            }
        })
    </script>
</html>

posted @ 2019-02-13 11:27  *沧海一粟*  阅读(1544)  评论(0)    收藏  举报