笑脸评论功能

最新推荐文章于 2024-09-28 19:02:04 发布

梦柒-Lotus.

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量131

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_67123189/article/details/137820061

版权

该篇文章介绍了如何在Vue项目中使用模板和指令(v-if/v-else)实现一个可交互的评分星图，展示了如何根据评分动态加载图片和处理用户点击事件。

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

效果图片：

代码部分：

<template>
   <div class="scores">
        <ul class="score-ul">
          <li
            class="score-li"
            v-for="(item,index) in scoreList"
            :key="item.score"
            @click="onScoreChange(item, index)">
            <div>
              <img
                v-if="scoreValue==item.score?true:false"
                class="score-star"
                :src="item.img2"
                alt=""/>
              <img
                v-else
                class="score-star"
                :src="item.img1"
                alt=""/>
            </div>
            <div v-if="scoreValue==item.score?true:false">{{item.content}}</div>
            <div v-else class="scoreText">{{item.content</div>
          </li>
        </ul>  
    </div>
</template>

<script>
export default {
  data() {
    this.scoreList = [
      {
        score: 1,
        img1: require("./img/img_hencha_normal.png"),
        img2: require("./img/img_hencha_active.png"),
        content: "很差",
      },
      {
        score: 2,
        img1: require("./img/img_jiaocha_normal.png"),
        img2: require("./img/img_jiaocha_active.png"),
        content: "较差"
      },
      {
        score: 3,
        img1: require("./img/img_manyi_normal.png"),
        img2: require("./img/img_yiban_active.png"),
        content: "一般"
      },
      {
        score: 4,
        img1: require("./img/img_jiaohao_normal.png"),
        img2: require("./img/img_jiaohao_active.png"),
        content: "较好"
      },
      {
        score: 5,
        img1: require("./img/img_manyi_normal.png"),
        img2: require("./img/img_manyi_active.png"),
        content: "满意"
      },
    ];
    return {
      scoreValue: 5,
    };
  },
  methods: {
    onScoreChange(item, index) {
      if (this.isReadonly) {
        return;
      }
      console.log(index);
      this.scoreValue = item.score;
      console.log("this.scoreValue",this.scoreValue);
    },
  },
};
</script>

<style scoped>
.scores {
  text-align: center;
}
.score-ul {
  display: flex;
  justify-content: center;
}
.score-li {
  width: 40px;
  margin: 0 6px;
}
.score-star {
  width: 100%;
}
.scoreText {
  color: rgba(211, 211, 211);
}
</style>