Vue动态实现评分效果的方法是什么

这篇文章主要介绍“Vue动态实现评分效果的方法是什么”，在日常操作中，相信很多人在Vue动态实现评分效果的方法是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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>

vue是什么

Vue是一套用于构建用户界面的渐进式javascript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

到此，关于“Vue动态实现评分效果的方法是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！