vue中实现一个评分星级功能

不多说直接上代码
星星是使用的iconfont图标

<div>
    <ul>
        <li
        v-for='item in list'
        
        >
            <span class="iconfont icon-start-copy " :style="{color:item.isred?'gray':'red'}" @click ="cools(item.id)"></span>
        </li>
    </ul>
</div>  

js部分

data(){
     return{
         list:[{id:1,isred:true},{id:2,isred:true},{id:3,isred:true},{id:4,isred:true},{id:5,isred:true}]
     }
 },
 methods:{
     cools(id){
         this.list.forEach(element => {
             if(element.id<=id){
                 element.isred = false
             }else{
                 element.isred = true
             }
         });
     }
 },