Vue動態(tài)實現(xiàn)評分效果
更新時間：2017年05月24日 12:14:10 作者：薛偉杰
這篇文章主要為大家詳細介紹了Vue動態(tài)實現(xiàn)評分效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue動態(tài)實現(xiàn)評分效果的具體代碼，供大家參考，具體內(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ù)不改變時不會重新渲染-->
</ul>
</div>
<script>
new Vue({
el: '#app',
data:{
score: 4
},
computed:{ //計算屬性
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ù)需求改變代碼
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue提供了mixin、extends配置項,最近使用中發(fā)現(xiàn)很好用,下面這篇文章主要給大家介紹了關于Vue中Mixin&extends的詳細使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02
ant design vue動態(tài)循環(huán)生成表單以及自定義校驗規(guī)則詳解
這篇文章主要介紹了ant design vue動態(tài)循環(huán)生成表單以及自定義校驗規(guī)則詳解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了詳解Vue SPA項目優(yōu)化小記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue-cli啟動本地服務局域網(wǎng)不能訪問的原因分析
這篇文章主要介紹了vue-cli啟動本地服務，局域網(wǎng)下訪問不到的原因分析,在文中還給大家介紹了vue-cli起的webpack項目 用localhost可以訪問，但是切換到ip就不可以訪問 的原因，本文給大家介紹的非常詳細，需要的朋友參考下2018-01-01
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當于module.exports的傳送門,module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個變量,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue入門學習筆記,結(jié)合實例形式分析了vue.js的基本概念、對象、過濾器、指令等的相關原理與簡單使用方法,需要的朋友可以參考下2019-04-04
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細介紹了Vue自嵌套樹組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue3+TS 實現(xiàn)自定義指令長按觸發(fā)綁定的函數(shù)
這篇文章主要介紹了vue3+TS實現(xiàn)自定義指令長按觸發(fā)綁定的函數(shù),文中給大家分享了編寫自定義指令時遇到的幾個難點，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
vue?contextmenujs鼠標右鍵菜單高度不夠顯示不全的問題及解決方法
這篇文章主要介紹了使用vue-contextmenujs鼠標右鍵菜單時，當高度不夠時顯示不全的問題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問題，但是如果組件升級了，想要使用最新升級后的組件，還要再次修改代碼，需要的朋友可以參考下2022-07-07