首先行引进onsen和vue.js包.
onsen有自带css画的小星星这边只要引用就可以了
<ons-page> ???<style> ???????.ion-star{ ???????????font-size: 24px; ???????????margin-right: 5px; ???????????color: #FFB400; ???????} ???????.ion-ios-star-outline{ ???????????font-size: 24px; ???????????margin-right: 5px; ???????????color: black; ???????} ???????????</style> ????????????<div id="starIcon"> ???????????<label>星星数量:{{starNum}}分</label> ???????????<template v-for="(star,index) in stars"> ????????????????????<ons-icon v-bind:icon="star.icon" ??v-on:click="rating(index)"></ons-icon> ???????????</template> ????</div> ????????????????<script> ???????????//星星的图片路径 ???????????var starOffImg = "ion-ios-star-outline"; ???????????var starOnImg = "ion-star"; ???????????var app = new Vue({ ???????????????el: "#starIcon", ???????????????data: { ???????????????????stars: [{ ???????????????????????????icon: starOffImg, ???????????????????????????active: false ???????????????????????}, { ???????????????????????????icon: starOffImg, ???????????????????????????active: false ???????????????????????}, { ???????????????????????????icon: starOffImg, ???????????????????????????active: false ???????????????????????}, ???????????????????????{ ???????????????????????????icon: starOffImg, ???????????????????????????active: false ???????????????????????}, { ???????????????????????????icon: starOffImg, ???????????????????????????active: false ???????????????????????} ???????????????????], ???????????????????starNum: 0, ???????????????}, ???????????????methods: { ???????????????????//评分 ???????????????????rating: function(index) { ???????????????????????var total = this.stars.length; //星星总数 ???????????????????????var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量 ???????????????????????//进入if说明页面为初始状态 ???????????????????????if(this.starNum == 0) { ???????????????????????????this.starNum = idx; ???????????????????????????for(var i = 0; i < idx; i++) { ???????????????????????????????this.stars[i].icon = starOnImg; ???????????????????????????????this.stars[i].active = true; ???????????????????????????} ???????????????????????} else { ???????????????????????????//如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。 ???????????????????????????if(idx == this.starNum) { ???????????????????????????????for(var i = index; i < total; i++) { ???????????????????????????????????this.stars[i].icon = starOffImg; ???????????????????????????????????this.stars[i].active = false; ???????????????????????????????} ???????????????????????????} ???????????????????????????//如果小于当前最高星级，则直接保留当前星级 ???????????????????????????if(idx < this.starNum) { ???????????????????????????????for(var i = idx; i < this.starNum; i++) { ???????????????????????????????????this.stars[i].icon = starOffImg; ???????????????????????????????????this.stars[i].active = false; ???????????????????????????????} ???????????????????????????} ???????????????????????????//如果大于当前星级，则直接选到该星级 ???????????????????????????if(idx > this.starNum) { ???????????????????????????????for(var i = 0; i < idx; i++) { ???????????????????????????????????this.stars[i].icon= starOnImg; ???????????????????????????????????this.stars[i].active = true; ???????????????????????????????} ???????????????????????????} ???????????????????????????var count = 0; //计数器-统计当前有几颗星 ???????????????????????????for(var i = 0; i < total; i++) { ???????????????????????????????if(this.stars[i].active) { ???????????????????????????????????count++; ???????????????????????????????} ???????????????????????????} ???????????????????????????this.starNum = count; ???????????????????????} ???????????????????} ???????????????} ???????????}) ???????</script> ???</ons-page>效果图:
星星评分vue.js+onsen
原文地址：https://www.cnblogs.com/wuxiaojuan/p/9529937.html