VUE實現評分效果和不同型別分數展示效果元件

廊橋夢醉發表於2018-03-10

一、在開發的過程中會可能會遇到下圖這樣的評分效果,下面就來看看這種效果用vue如何實現

效果圖

9444961-c3278265f024aa48.jpg
圖片發自簡書App

HTML部分

9444961-fd9e976fb0ac6ab2.jpg
圖片發自簡書App

CSS部分

9444961-37da311b824b5d84.jpg
圖片發自簡書App

JS部分

9444961-6ee200505a1e37ea.jpg
圖片發自簡書App

二、專案的開發過程,經常會遇到評價分數的展示,下邊我們就來實現以下,不同型別不同大小,可以在任意使用的分數展示的vue元件,計算屬性來動態新增不同的樣式。

當時4.8分的時候展示效果如下

9444961-c3278265f024aa48.jpg

只要應用的技術是vue中的computed來計算屬性,根基不同的屬性新增不同的類,程式碼實現如下

html結構

9444961-c4506d1585f85a40.png

css樣式

9444961-d4993a6d27726578.png

js中的屬性計算(重點)

根據size跟score的值的不同來計算新增哪一個樣式

9444961-03c64f4578da8b4b.png

相關文章