vue星星评分

<template>
  <div>
    <div class="xx">
      <div v-for="(i, index) in list" :key="index" class="xxitem">
        <img
          :src="xing > index ? stara : starb"
          width="100%"
          :class="'img' + index"
        />
      </div>
    </div>
  </div>
</template>
   
  <script>
export default {
  name: "evaluate",
  data() {
    return {
      rateScoreText: "",

      stara: require("../assets/xxy.jpg"), //亮星星
      list: [0, 1, 2],
      starb: require("../assets/xx.jpg"), //暗星星
      xing: 0,
    };
  },
  methods: {
    clickStars() {
      this.xing = i;
    },
  },
  mounted() {
    //亮的星星个数
    this.xing = 2;
  },
};
</script>
   
  <style scoped>
.StarsWrap {
  width: 100%;
  height: 0.2rem;
  margin: 0.1rem 0;
}
.StarsWrap li {
  float: left;
  /* margin-right: 0.1rem; */
}
.xx {
  position: absolute;
  top: 15%;
  margin: auto;
  width: 30%;
  height: 50%;
  left: 20%;
  /* box-shadow: 0 0 0 2px #f76503ef; */
}
.xxitem {
  position: relative;
  float: left;
  /* left: 10%; */
  width: 30%;
  box-shadow: 0 0 0 2px #f76503ef;
  margin: 1.5%;
}
.img1 {
  position: relative;
  top: -40px;
}
</style>

效果