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

最新推荐文章于 2026-04-29 06:57:10 发布

原创最新推荐文章于 2026-04-29 06:57:10 发布 · 2k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#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
             }
         });
     }
 },