Vue動(dòng)態(tài)實(shí)現(xiàn)評(píng)分效果
更新時(shí)間：2017年05月24日 12:14:10 作者：薛偉杰
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)實(shí)現(xiàn)評(píng)分效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue動(dòng)態(tài)實(shí)現(xiàn)評(píng)分效果的具體代碼，供大家參考，具體內(nèi)容如下
1.圖片分為三種
on:
half:
off
<style>
.star{
font-size: 0;
}
.star-item{
display: inline-block;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-right: 22px;
background-size: 100%;
}
.star-item.on{
background-image: url(img/on.png);
}
.star-item.half{
background-image: url(img/half.png);
}
.star-item.off{
background-image: url(img/off.png);
}
</style>
<div id="app">
<ul class="star">
<span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" track-by="index"></span><!--性能優(yōu)化 track-by 數(shù)據(jù)不改變時(shí)不會(huì)重新渲染-->
</ul>
</div>
<script>
new Vue({
el: '#app',
data:{
score: 4
},
computed:{ //計(jì)算屬性
itemClasses(){
let result = [];
let score = Math.floor(this.score * 2 ) / 2;
let hasDecimal = score % 1 !== 0;
let integer = Math.floor(score);
for(let i=0;i<integer;i++){
result.push("on");
}
if(hasDecimal){
result.push("half");
}
while(result.length < 5){
result.push("off");
}
return result;
}
}
})
</script>
根據(jù)需求改變代碼
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue提供了mixin、extends配置項(xiàng),最近使用中發(fā)現(xiàn)很好用,下面這篇文章主要給大家介紹了關(guān)于Vue中Mixin&extends的詳細(xì)使用方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
ant design vue動(dòng)態(tài)循環(huán)生成表單以及自定義校驗(yàn)規(guī)則詳解
這篇文章主要介紹了ant design vue動(dòng)態(tài)循環(huán)生成表單以及自定義校驗(yàn)規(guī)則詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解Vue SPA項(xiàng)目?jī)?yōu)化小記
這篇文章主要介紹了詳解Vue SPA項(xiàng)目?jī)?yōu)化小記，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue-cli啟動(dòng)本地服務(wù)局域網(wǎng)不能訪問(wèn)的原因分析
這篇文章主要介紹了vue-cli啟動(dòng)本地服務(wù)，局域網(wǎng)下訪問(wèn)不到的原因分析,在文中還給大家介紹了vue-cli起的webpack項(xiàng)目 用localhost可以訪問(wèn)，但是切換到ip就不可以訪問(wèn) 的原因，本文給大家介紹的非常詳細(xì)，需要的朋友參考下2018-01-01
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當(dāng)于module.exports的傳送門(mén),module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對(duì)象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個(gè)變量,需要的朋友可以參考下2023-10-10
Vue入門(mén)學(xué)習(xí)筆記【基本概念、對(duì)象、過(guò)濾器、指令等】
這篇文章主要介紹了Vue入門(mén)學(xué)習(xí)筆記,結(jié)合實(shí)例形式分析了vue.js的基本概念、對(duì)象、過(guò)濾器、指令等的相關(guān)原理與簡(jiǎn)單使用方法,需要的朋友可以參考下2019-04-04
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue自嵌套樹(shù)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue3+TS 實(shí)現(xiàn)自定義指令長(zhǎng)按觸發(fā)綁定的函數(shù)
這篇文章主要介紹了vue3+TS實(shí)現(xiàn)自定義指令長(zhǎng)按觸發(fā)綁定的函數(shù),文中給大家分享了編寫(xiě)自定義指令時(shí)遇到的幾個(gè)難點(diǎn)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
vue?contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問(wèn)題及解決方法
這篇文章主要介紹了使用vue-contextmenujs鼠標(biāo)右鍵菜單時(shí)，當(dāng)高度不夠時(shí)顯示不全的問(wèn)題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問(wèn)題，但是如果組件升級(jí)了，想要使用最新升級(jí)后的組件，還要再次修改代碼，需要的朋友可以參考下2022-07-07