• vue中星级判断函数


    完整代码:

    <template>

      <div>

       <div class="rate">

         <p>星级:</p>

         <div class="star" v-for="(item,index) in stars" :key="index" @click="rating(index)">
           <img :src="item.pic" alt="">
         </div>
       </div>
      </div>
    </template>
    <script>
     export default {
       data(){
         return{
          stars:[
            {pic:'../../../static/staroff.png',active:false},
            {pic:'../../../static/staroff.png',active:false},
            {pic:'../../../static/staroff.png',active:false},
            {pic:'../../../static/staroff.png',active:false},
            {pic:'../../../static/staroff.png',active:false}
          ],
          starNum:0;
         }
       },
       methods{
         // 星级评价函数
         rating(index){
          var total=this.stars.length;//星星总数
          var idx=index+1;//代表选的第idx颗星星,也代表显示星星的数量
          if(this.starNum==0){//表示页面是初始状态
            this.starNum=idx;
            for(var i=0;i<idx;i++){
              this.stars[i].pic="../../../static/star.png";
              this.stars[i].active=true
            }
          }else{
            if(idx==this.starNum){//如果再次点击当前选中的星级,仅取消掉当前星级,保留之前的
              for(var i=index;i<total;i++){
                this.stars[i].pic="../../../static/staroff.png";
                this.stars[i].active=false
              }
            }
            if(idx<this.starNum){// 如果小于当前最高星级,则直接保留当前星级
              for(var i=idx;i<this.starNum;i++){
                this.stars[i].pic="../../../static/staroff.png";
                this.stars[i].active=false
              }
            }
            if(idx>this.starNum){// 如果大于当前星级,则直接选择到该星级
              for(var i=0;i<idx;i++){
                this.stars[i].pic="../../../static/star.png";
                this.stars[i].active=true
              }
            }
            var count=0;//计数器:统计当前有几颗星
            for(var i=0;i<total;i++){
              if(this.stars[i].active){
                count++;
              }
            }
            this.starNum=count;
          }
         }
       }
     }
    </script>
     
     
  • 相关阅读:
    ObserverPattern(观察者模式)-----Java/.Net
    MementoPattern(备忘录模式)-----Java/.Net
    SpringCloud-day02-服务消费者项目建立
    SpringCloud-基础项目构建
    idea git 整合使用
    springcloud-知识点总结(三):Hystrix & Dashboard & turbine & Zuul & SpringCloud Config
    springcloud-知识点总结(二):Ribbon&Feign
    springcloud-知识点总结(一):Eureka
    layui-tree创建下拉树型选项框
    ztree带有选项框的树形菜单使用
  • 原文地址:https://www.cnblogs.com/kangkang1207/p/10675500.html
Copyright © 2020-2023  润新知