我們知道，許多外賣app都有評分的星星，這里我總結一下對評分組件的開發，學習視頻：餓了么實戰（慕課網）

1.html部分

<div class="star" :class="starType"><span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span> </div>

解釋

在大的div里綁定starType是因為在整個App中，有多個評分組件，而它們的大小不一樣，所以根據大小動態的綁定class.

同樣的原理，在上一節header組件開發中也有介紹，但直到寫到這里我開始漸漸明白vue.js中:class的意義。以前我想既然可以直接添加class，為什么要用綁定class來多此一舉。現在我明白的，基礎的樣式設定，直接添加class就可以了，但是有時候涉及到根據不同的狀態有不同的樣式時，就要用綁定class了。

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>

轉載于:https://www.cnblogs.com/huyuzhu/p/6949766.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的评分组件开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。