vue实现评价星星功能（代码全）

最新推荐文章于 2024-09-08 13:12:02 发布

就像风1样

最新推荐文章于 2024-09-08 13:12:02 发布

阅读量5.6k

点赞数 2

分类专栏： Vue vue专栏文章标签： vue 评价星星

本文链接：https://blog.csdn.net/qq_42221334/article/details/93724337

版权

本文分享了如何在Vue中实现评价星星的功能，提供了详细的代码示例，并邀请读者查看作者的Vue专栏获取更多技巧。

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

代码：

<template>
  
      <ul class="StarsWrap">
        <li v-for="(i,index) in list" :key="index" @click="clickStars(index)">
          <img :src="xing>index?stara:starb"/>
        </li>
      </ul>
      <p>{
  {rateScoreText}}</p>

</template>

<script>

export default {
  name: 'evaluate',
  data () {
    return {
      rateScoreText: '',
      rateScoreDesc: ['非常不满意，各方面都很差', '不满意，比较差', '一般，还需改善', '比较满意，仍可改善', '非常满意,无可挑剔'],
      stara:'../../static/img/details/shoucang.png',//亮星星
      list:[0,1,2,3,4],
      starb:'../../static/img/details/shouc.png',//暗星星
      xing:0,
    }