咱們把星級評價單獨作成一個Star組件,抽離出來,其中父組件中引入(傳入的是評分的值)javascript
<div class="score"> <Star :score="poiInfo.wm_poi_score"></Star> </div>
初始Star.vuecss
<template> <div> <div class="star"> <span class="star-item"></span> </div> <span>{{ score }}</span> </div> </template> <script> export default { name: 'Star', props: { score: Number } } </script>
首先咱們把要作星級圖片用類名爲star-item的span標籤循環出來,星級圖片有三張,全星,半星,空星html
下面只羅列關鍵的css部分, 經過增長類區分圖片vue
.star-item.on { background-image: url(./img/star24_on@2x.png); } .star-item.half { background-image: url(./img/star24_half@2x.png); } .star-item.off { background-image: url(./img/star24_off@2x.png); }
接下來修改Star.vue的代碼java
<div class="star"> <span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass" > </span> </div>
itemClasses值是經過計算屬性獲取的,思路:數組
好比舉例評分:this
JS部分的代碼:url
// 星星長度 const LENGTH = 5 // 星星的狀態 const CLS_ON = 'on' const CLS_HALF = 'half' const CLS_OFF = 'off' export default { name: 'Star', props: { score: Number }, computed: { itemClasses () { let result = [] let score = Math.floor(this.score * 2) / 2 // 半星 (經過跟1取餘判斷是否爲小數) let hasDecimal = score % 1 !== 0 // 全星 (向下取整,獲取全星部分) let integer = Math.floor(score) // 遍歷全星 for(let i = 0; i < integer; i++){ result.push(CLS_ON) } // 處理半星 if(hasDecimal){ result.push(CLS_HALF) } // 補齊 while(result.length < LENGTH){ // 到這裏還不夠五顆星,則湊空星 result.push(CLS_OFF) } return result } } }
itemClasses最終是返回了一個長度爲5的數組,須要注意的是spa
let score = Math.floor(this.score * 2) / 2
半星的劃分:只有當小數第一位大於或等於5才能夠算爲半星,不然是空星。該計算是爲了小數部分>=0.5的計算結果帶有小數,從而再後面跟1取餘判斷是否爲半星。一開始有點蒙,多試幾個數想一想就懂了。code
好比4.3分沒有半星,4.5有半星出現
結果:
好比傳入的值爲4.7,則顯示