VUE：实现星级评价，以VUE举例

最新推荐文章于 2024-07-15 15:03:26 发布

前端-如此如此。

最新推荐文章于 2024-07-15 15:03:26 发布

阅读量1.2k

点赞数 1

分类专栏： web前端之VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44136505/article/details/105111542

版权

本文通过VUE演示如何创建一个星级评价功能，适用于商品、服务等评价场景。实例中提到样式可根据实际项目需求调整，欢迎点赞和评论交流技术。

摘要由CSDN通过智能技术生成

简介

在很多项目中，需要用到对商品、订单、服务等的评价功能，其中使用星级评价是一种快捷表现满意度的体现。接下来以VUE项目环境列举一个实例。具体样式的话，需要自己根据项目实际情况进行修改。

具体实现

// HTML
<div class="flexRowStartCenter effectAndAttitudeBox">
  <div class="standardTitle">疗效：</div>
  <div class="flexRowStartCenter">
    <img class="standardIcon" :src="index < curativeEffect ? xingIcon : xingIconBot" v-for="(item, index) in curativeEffectList" :key="index" @click="clickXingIconFun(index, 'curativeEffect')" />
  </div>
</div>
<div class