当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue动态实现评分效果

Vue动态实现评分效果

2018年04月26日  | 移动技术网IT编程  | 我要评论

顾宪成字叔时,中华美食菜谱,蛊惑随行

本文实例为大家分享了vue动态实现评分效果的具体代码，供大家参考，具体内容如下

1.图片分为三种

on:half: off

<style>
  .star{
    font-size: 0;
  }
  .star-item{
    display: inline-block;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-right: 22px;
    background-size: 100%;
  }
  .star-item.on{
    background-image: url(img/on.png);
  }
  .star-item.half{
    background-image: url(img/half.png);
  }
  .star-item.off{
    background-image: url(img/off.png);
  }
</style>
<div id="app">
  <ul class="star">
    <span v-for="(itemclass,index) in itemclasses" :class="itemclass" class="star-item" track-by="index"></span><!--性能优化 track-by 数据不改变时不会重新渲染-->
  </ul>
</div>

<script>
  new vue({
    el: '#app',
  　data:{
    score: 4
  },
   computed:{ //计算属性
    itemclasses(){
      let result = [];
      let score = math.floor(this.score * 2 ) / 2;
      let hasdecimal = score % 1 !== 0;
      let integer = math.floor(score);
      for(let i=0;i<integer;i++){
        result.push("on");
      }
      if(hasdecimal){
        result.push("half");
      }
      while(result.length < 5){
        result.push("off");
      }
      return result;
    }
  }
})
</script>

根据需求改变代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网