vue手写星级评分

素颜马尾好姑娘i 2022-11-16 15:15 215阅读 0赞

基于vue的星级评分方法

效果图如下
在这里插入图片描述

  1. <u-image @click='score(index)' v-for="(item,index) in xList" :key='index' :src="item.src" width='34rpx' height='35rpx' style='margin-right: 25rpx;' ></u-image>

data里面声明数据

  1. xList:[
  2.     { i:0,src:'../../static/wxz.png'},
  3.     { i:1,src:'../../static/wxz.png'},
  4.     { i:2,src:'../../static/wxz.png'},
  5.     { i:3,src:'../../static/wxz.png'},
  6.     { i:4,src:'../../static/wxz.png'},
  7. ]

点击事件

  1. score(index){ 
  2.     this.xList.map(res =>{ 
  3.         res.src = '../../static/wxz.png' //每次点击先恢复为原来的灰色星星
  4.         if(res.i <= index){ 
  5.             res.src = '../../static/icon_xx_pre.png'//遍历将i<=点击的下标的星星点亮
  6.         }
  7.     })
  8. }

还有一个很简单的方法是u-view里面有组件
如果你的项目使用的u-view，那就不用写了直接去C&V吧~

发表评论

表情：
评论列表 （有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 星级评分组件

    Vue 星级评分组件 描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 Ctrl + C 和 Ctr

    向右看齐向右看齐/ 0 赞/ 83 阅读