• 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>
     
     
  • 相关阅读:
    防窜货下加密锁使用常见问题
    SQL Server 2000/2005/2008 触发器的管理和查看
    列表显示时,部分凭证会分两行显示,且不能删除
    JDBC 连接 带实例名的SQL Server
    登录软件提示:读取数据源出现错误,pkcs7填充无效,无法被移除
    完美卸载SQL Server 2008的方案
    彻底卸载(删除)SQL server2000
    NCV5取消:授权数到达,或者许可证过期提示的秘诀
    SQL Server日志清空方法 .
    第二天 一列布局
  • 原文地址:https://www.cnblogs.com/kangkang1207/p/10675500.html
Copyright © 2020-2023  润新知