vue 星级评分 ——简单版

最新推荐文章于 2025-10-25 10:18:06 发布

原创最新推荐文章于 2025-10-25 10:18:06 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue实现星级评分——简单版本 #通用评分

小组件专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个基于Vue的简单而高效的星级评分组件实现方法，通过三目运算符动态切换星星图标状态，适用于网页应用中各种评分场景。

此星级评分超级简单好用高效适用于多种场景三目运算

代码如下
html 部分

// An highlighted block
<template>
  <div>
    <div style="display: inline-block"
      v-for="(num,index) in 6" :key="index" @click="handle(index)">
      <img :src='data>=index?ling:bu' alt="">
    </div>
  </div>
</template>

js 部分

// An highlighted block
<script>
  import img from '../assets/xingX.png'
  import imgB from '../assets/xingB.png'
  export default {
    data() {
      return {
        data:3,
        bu:imgB,
        ling:img
      }
    },
    methods:{
      handle(val){
        console.log(val)
        this.data = -1
        this.data = val
      }
    }
  }
</script>