Vue实现星级评价效果

Vue实现动态星级评价组件

最新推荐文章于 2025-01-14 09:46:22 发布

原创

最新推荐文章于 2025-01-14 09:46:22 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue中创建一个可动态展示星级评价的组件。通过将星级评价抽象为Star.vue组件，利用循环和计算属性来根据评分值动态设置全星、半星或空星的样式。CSS部分通过类名区分不同状态的星星，而JS部分的计算属性根据评分计算出一个长度为5的数组，用于绑定每个星星的class，确保正确显示星级。例如，4.7分对应['on', 'on', 'on', 'on', 'half']，3.4分对应['on', 'on', 'on', 'half', 'half']。半星的判断条件是小数部分大于等于0.5。" 118194830,9859376,零基础学3D建模：从入门到精通的软件选择指南,"['3D建模', '3D建模入门', '三维建模', '3D建模软件', '游戏建模']

我们把星级评价单独做成一个Star组件，抽离出来，其中父组件中引入(传入的是评分的值)

<div class="score">
    <Star :score="poiInfo.wm_poi_score"></Star>
</div>

初始Star.vue

<template>
  <div>
      <div class="star">
          <span class="star-item"></span>
      </div>
      <span>{
  
  { score }}</span>
  </div>
</template>
<script>
export default {
    name: 'Star',
    props: {
        score: Number
    }
}
</script>

首先我们把要做星级图片用类名为star-item的span标签循环出来，星级图片有三张，全星，半星，空星

下面只罗列关键的css部分, 通过增加类区分图片

.star-item.on {
   
   
    background-image: url

最低0.47元/天解锁文章