vue.js v-for 里面计算属性怎么计算的？

Question

点这里查看demo

HTML

<style>
        .blue{
            color:blue;
        }
        .red{
            color:red;
        }
        .ccc{
            color:#ccc;
        }
</style>
<div id="app">
    <ul>
        <li v-for="list in lists" 
            :class="{'red':red,'blue':blue, 'ccc':ccc}">            {{list.name}}</li>
    </ul>
</div>

JS

<script>

    new Vue({
        el: '#app',
        data:function(){
            return {
                lists:[
                    {name:1111,state:1},
                    {name:2222,state:2},
                    {name:3333,state:3}]
            };
        },
        computed:{
            red:function(){
                for( var i = 0; i< this.lists.length; i++ ){
                    if( this.lists[i].state === 1 ){
                        return true;
                    }
                }
            },
            blue:function(){
                for( var i = 0; i< this.lists.length; i++ ){
                    if( this.lists[i].state === 2 ){
                        return true;
                    }
                }
            },
            ccc:function(){
                for( var i = 0; i< this.lists.length; i++ ){
                    if( this.lists[i].state === 3 ){
                        return true;
                    }
                }
            }
        }
    });
</script>

为什么三个li都是灰色的，我想要的效果是一个蓝色，一个红色，一个灰色

Answer 1

既然你的li跟着颜色走，那你就在lists中加上颜色属性啊

data:function(){
            return {
                lists:[
                    {name:1111,state:1,color:'blue'},
                    {name:2222,state:2,color:'red'},
                    {name:3333,state:3,color:'green'}]
            };
        },

<li v-for="list in lists" :class="list.color">{{list.name}}</li>

Answer 2

:class="{'red':list.state==1,'blue':list.state==2, 'ccc':list.state==3}"