我們把星級評價單獨做成乙個star元件，抽離出來，其中父元件中引入(傳入的是評分的值)
初始star.vue
} export default {
name: 'star',
props: {
score: number
首先我們把要做星級用類名為star-item的span標籤迴圈出來，星級有三張，全星，半星，空星
下面只羅列關鍵的css部分, 通過增加類區分
.star-item.on {
background-image: url(./img/[email protected]);
.star-item.half {
background-image: url(./img/[email protected]);
.star-item.off {
background-image: url(./img/[email protected]);
接下來修改star.vue的**
class="star-item"
v-for="(itemclass, index) in itemclasses"
:key="index"
:class="itemclass"
itemclasses值是通過計算屬性獲取的，思路：
通過computed返回乙個長度為5的陣列(顯示5顆星)
陣列的值是上述css取的不同星對應的類名，再通過繫結每乙個迴圈新增的class，從而遍歷星級。
比如舉例評分：
4.7分對應的陣列為['on', 'on', 'on', 'on', 'half']
3.4分對應的陣列為['on', 'on', 'on', 'half', 'half']
js部分的**：
// 星星長度
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的陣列，需要注意的是
let score = math.floor(this.score * 2) / 2
半星的劃分：只有當小數第一位大於或等於5才可以算為半星，否則是空星。該計算是為了小數部分》=0.5的計算結果帶有小數，從而再後面跟1取餘判斷是否為半星。一開始有點蒙，多試幾個數想想就懂了。
比如4.3分沒有半星，4.5有半星出現
結果：比如傳入的值為4.7，則顯示
JavaScript之實現乙個簡單的Vue
原文出處 wclimb vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麼樣的，今天我們就來一起實現乙個簡單的vue 實現之前我們得先看一下object.defineproperty的實現，因為vue主要是通過資料劫持來實現的，通過get set來完成資料的讀取和更新...
JavaScript之實現乙個簡單的Vue
vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麼樣的，今天我們就來一起實現乙個簡單的vue object.defineproperty 實現之前我們得先看一下object.defineproperty的實現，因為vue主要是通過資料劫持來實現的，通過get set來...
vue實現乙個表示實時，載入中的動畫效果
前言 用css實現的乙個表示實時效果的動畫，效果圖展示 實現 用的ivew的card 1.template 2.data裡面定義資料 alldevices 3.css樣式 很重要 line scale pulse out rapid.success div line scale pulse out ...