我們知道，許多外賣app都有評分的星星，這里我總結一下對評分組件的開發，學習視頻：餓了么實戰（慕課網）
1.html部分
<div class="star" :class="starType"> <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span></div>
解釋
1.在大的div里綁定starType是因為在整個App中，有多個評分組件，而它們的大小不一樣，所以根據大小動態的綁定class.
同樣的原理，在上一節header組件開發中也有介紹，但直到寫到這里我開始漸漸明白vue.js中:class的意義。以前我想既然可以直接添加class，為什么要用綁定class來多此一舉。現在我明白的，基礎的樣式設定，直接添加class就可以了，但是有時候涉及到根據不同的狀態有不同的樣式時，就要用綁定class了。
2.v-for 這里我們沒有寫5個span，而是遍歷itemClasses，這是vue.js中的一種常用方法。既減少了代碼，而且動態獲取數據。
2.js部分
1. 得到評分數據
像上一節一樣，我們通過props來接收數據。我們要接收的是兩個number類型的數據，一個是星星的尺寸，一個是分數。
props: { size:{ type:Number }, score:{ type:Number } }2.屬性的計算
1）.接收size動態綁定不同的class
starType() { return 'star-'+this.size; } .star-48 { width: 20px; height: 20px; margin-right: 22px; background-size: 20px 20px; } .star-36 { width: 15px; height: 15px; margin-right: 6px; background-size: 15px 15px; } .star-24 { width: 10px; height: 10px; margin-right: 3px; background-size: 10px 10px; }2）. 通過計算確定添加全星半星和無星
const LENGTH = 5;const CLS_ON = 'on';const CLS_HALF = 'half';const CLS_OFF = 'off';itemClasses() { let result = []; let score = Math.floor(this.score*2)/2; let hasDecimal = score%1 !== 0; let integer = Math.floor(score); for (var 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; }這段代碼的思路是：創建一個數組儲存星星，判斷分數是否在.5以上，將分數取整，有多少分push幾個on星星進去，有.5以上，push一個half，然后push進off直到長度達到5。
3）.css部分
以star-48的尺寸為例
.star-48 .on { background-image: url('star48_on@2x.png') } .star-48 .half { background-image: url('star48_half@2x.png') } .star-48 .off { background-image: url('star48_off@2x.png') }4.完整代碼
<template> <div class="star" :class="starType"> <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span> </div></template><script type="text/javascript"> const LENGTH = 5; const CLS_ON = 'on'; const CLS_HALF = 'half'; const CLS_OFF = 'off'; export default { props: { size:{ type:Number }, score:{ type:Number } }, computed:{ starType() { return 'star-'+this.size; }, itemClasses() { let result = []; let score = Math.floor(this.score*2)/2; let hasDecimal = score%1 !== 0; let integer = Math.floor(score); for (var 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; } } };</script><style type="text/css"> .star { font-size: 0; } /* .star-48 { width: 20px; height: 20px; margin-right: 22px; background-size: 20px 20px; } */ .star-48 : last-chlid { margin-right: 0; } .star-48 .on { background-image: url('star48_on@2x.png') } .star-48 .half { background-image: url('star48_half@2x.png') } .star-48 .off { background-image: url('star48_off@2x.png') } .star-36 { width: 15px; height: 15px; margin-right: 6px; background-size: 15px 15px; } .star-36 .no { background-image: url('star36_on@2x.png') } .star-36 .half { background-image: url('star36_half@2x.png') } .star-36 .off { background-image: url('star36_off@2x.png') } .star-24 { width: 10px; height: 10px; margin-right: 3px; background-size: 10px 10px; } .star-24 .no { background-image: url('star24_on@2x.png') } .star-24 .half { background-image: url('star24_half@2x.png') } .star-24 .off { background-image: url('star24_off@2x.png') } .star-item { display: inline-block; background-repeat: no-repeat; width: 20px; height: 20px; margin-right: 22px; background-size: 20px 20px; }</style>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
