nuxtProject/components/common/pingfen.vue

<template>
  <span class="component-pingfen">
    <i v-for="(_,index) in myData"
       :class="{'active': +myValue >= index,
       'not-active': +myValue < index}">
    </i>
  </span>
</template>

<script>
export default {
  name: "pingfen",
  props: {
    total: {
      type: Number | String,
      default: 10
    },
    value: {
      type: Number | String,
      default: 0
    }
  },
  computed: {
    myData() {
      return Array(this.myTotal).fill('');
    },
    myTotal() {
      return +this.total
    },
    myValue() {
      return +this.value-1
    },
  },
}
</script>

<style lang="scss" scoped>
.component-pingfen {
  display: flex;
  justify-content: flex-start;

  i {
    margin:  0 10px ;
    width:3px;

    &.active {
      background: red;
    }

    &.not-active {
      background: #2c98f2;
    }
  }


}
</style>