Vue动态实现评分效果

时间:2021-05-26

本文实例为大家分享了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>

根据需求改变代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章