Vue动态实现评分效果
2017-05-24 12:14
671 查看
本文实例为大家分享了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动态实现评分效果
- vue2.0使用动态组件实现tab切换效果(vue-cli)
- vue中用动态组件实现选项卡切换效果
- vue动态组件实现选项卡切换效果
- jQuery动态星级评分效果实现方法
- vue中用动态组件实现选项卡切换效果
- jQuery动态星级评分效果实现方法
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- Vue.js实现按钮的动态绑定效果及实现代码
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- vue+ElementUI实现订单页动态添加产品效果
- jQuery动态星级评分效果实现方法
- 在嵌入式用定时器实现动态效果!
- CSS技术结合图像实现动态效果的菜单导航
- 层级菜单动态效果的实现
- Javascript+CSS实现Flash动态新闻效果(pp原创)
- 用简单的方法实现Bingo随机出号动态效果
- js 动态加入input效果实现
- 在Css样式表中添加javascript,实现动态效果