vue实现星级评估价（app）_教学评估vue-优快云博客

本文链接：https://blog.youkuaiyun.com/yangmy_Shy/article/details/108317355

本文介绍了如何使用Vue.js框架在APP中实现星级评价功能。通过HTML定义星星图标，JavaScript处理用户交互，动态更新选中状态，以及CSS进行样式定制，实现了一套完整的星级评分组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<div class="evaStar">
    <ul class="star">
        <li v-for="(itemClass,index) in itemClasses" :class="itemClass" class="evaluateIcon" @click="stars(index)" track-by="index"></li><!--性能优化 track-by 数据不改变时不会重新渲染-->
    </ul>
</div>

js：

var vm = new Vue({
    el: '.app',
    data: {
        score: 4,
    },
    computed:{ //计算属性
        itemClasses(){
            var result = []; // 返回的是一个数组,用来遍历输出星星
            var score = Math.floor(this.score * 2 ) / 2; // 计算所有星星的数量
            var hasDecimal = score % 1 !== 0; // 非整数星星判断
            var integer = Math.floor(score); // 整数星星判断
            for(let i=0;i<integer;i++){ // 整数星星使用on
                result.push("on"); // 一个整数星星就push一个CLS_ON到数组
            }
            if(hasDecimal){ // 非整数星星使用half
                result.push("half"); // 类似

            }
            while(result.length < 5){// 余下的用无星星补全,使用off
                result.push("off");
            }
            return result;
        },
    },
    mounted: function () {



    },
    methods: {
        stars:function(index){
            this.score = index + 1;
        },
       
    }
});

css:

.evaluateIcon {
    display: inline-block;
    width:0.48rem;
    height: 0.48rem;
    margin-right: 0.12rem;
}

.evaluateIcon.on {
     background: url("../img/index/evaluateIcon.png") 0 0 no-repeat;
     background-size: 100%;
}
.evaluateIcon.off {
    background: url("../img/index/evaluateIcon.png") 0 -0.58rem no-repeat;
    background-size: 100%;
}