vue、小程序实现星星评分功能

现在这个时代星星评分已经十分普及了，不论那个APP需要评分的几乎都是使用星星来进行评分，

尽管十分普及这个功能，但我们可以使用较少的代码便可以实现这一需求

  <!-- 标签评分 -->
                <div style="display: flex;margin-bottom: 10px">
<!-- 装星星的容器，并进行循环，添加一个点击事件-->
                    <div class="comment-container-item-label-box" v-for="n in 5" :key="index" @click="selected(n)">
 <!-- 默认展示未选中星星-->
      <img class="comment-container-item1" v-show="cur<n"src="images/shouchang.png"/>
 <!-- 展示选中星星-->
  <img class="comment-container-item1" v-show="cur>=n"src="images/shouchang_check.png"/>
                    </div>
                </div>

 页面我们就写好了，接下来便是如何实现交互效果

data() {
            return {
                cur: -1,//评分星星下标,默认都不展示选中
          }
        },

//评分点击事件
            selected(n){
                this.cur = n - 1
           },

点击事件代码就这一行，是不是很简单，一行代码干了好多事情，简直不要太幸福，😄

怕记不住，你们可以收藏哦，不要太感谢我，助人为乐乃是中华的传统美德，嘿嘿嘿嘿😄

可直接赋值粘贴，🤭

<template>
    <div>
        <div class="comment-container">
            
                <!-- 标签评分 -->
                <div style="display: flex;margin-bottom: 10px">
                    <div class="comment-container-item-label-box" v-for="n in 5" :key="index" @click="selected(n)">
                        <img class="comment-container-item1" v-show="cur<n"
                             src="https://www.viplxy.com/smallRoutineTest/images/shouchang.png"/>
                        <img class="comment-container-item1" v-show="cur>=n"
                             src="https://www.viplxy.com/smallRoutineTest/images/shouchang_check.png"/>
                    </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "integralComment",
        data() {
            return {
                cur: -1,//评分星星下标
            }
        },
        methods: {
            //评分点击事件
            selected(n){
                this.cur = n - 1
                console.log(this.cur)
            }
            
        }
    }
</script>

<style scoped>
    .comment-container {
        padding: 15px;
    }
    .comment-container-item-label-box {
        padding: 6px 0px;
        display: flex;
        align-items: center;
        justify-content: end;
    }

    .comment-container-item1 {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    .imgurl-item {
        width: 80px;
        height: 80px;
        margin-right: 5px;
    }
</style>