全国服务热线:4008-888-888

公司新闻

爆火的微信小程序_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 

span v-for="(itemClass,index) in itemClasses" : track-by="index" /span !--性能优化 track-by 数据不改变时不会重新渲染-- /ul /div

根据需求改变代码

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服