点这里查看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都是灰色的,我想要的效果是一个蓝色,一个红色,一个灰色
既然你的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>
:class="{'red':list.state==1,'blue':list.state==2, 'ccc':list.state==3}"