Vue练习三十五:04_09_星级评分系统
Demo 在线地址:
https://sx00xs.github.io/test/35/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<template> <div class="star"> <span>点击星星就能打分</span> <ul ref="oUl"> <li v-for="(item, index) in message" :key="item.mes" :class="{on:item.isActive}" @mouseover="handleOver(index+1)" @mouseout="handleOut" @click="handleClick(index+1)" > <a href="#">{{index}}</a> </li> </ul> <span ref="oSpan"></span> <p ref="oP"></p> </div> </template> <script> export default { data(){ return{ score:0, star:0, message:[ { mes:'很不满意|差得太离谱,与卖家描述的严重不符,非常不满', isActive:false }, { mes:'不满意|部分有破损,与卖家描述的不符,不满意', isActive:false }, { mes:'一般|质量一般,没有卖家描述的那么好', isActive:false }, { mes:'满意|质量不错,与卖家描述的基本一致,还是挺满意的', isActive:false }, { mes:'非常满意|质量非常好,与卖家描述的完全一致,非常满意', isActive:false }, ] } }, methods:{ handleClick(index){ this.star=index; this.$refs.oP.style.display='none'; this.$refs.oSpan.innerHTML="<strong>" + index + " 分</strong> (" + this.message[index-1].mes.match(/\|(.+)/)[1] +")" }, handleOver(index){ this.point(index); var oP=this.$refs.oP; var oUl=this.$refs.oUl; var target=event.target; oP.style.display='block'; oP.style.left=oUl.offsetLeft + index * target.offsetWidth - 104 + 'px'; oP.innerHTML="<em><b>" + index + "</b> 分 " + this.message[index-1].mes.match(/(.+)\|/)[1] + "</em>" + this.message[index-1].mes.match(/\|(.+)/)[1] }, handleOut(){ this.point(); this.$refs.oP.style.display='none'; }, point(arg){ this.score = arg || this.star; for(var i=0;i<this.message.length;i++) this.message[i].isActive = i < this.score ? true : false } } } </script>