vue星級評分組件源碼,具體代碼如下所示:
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供扎賚諾爾網(wǎng)站建設(shè)、扎賚諾爾做網(wǎng)站、扎賚諾爾網(wǎng)站設(shè)計、扎賚諾爾網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、扎賚諾爾企業(yè)網(wǎng)站模板建站服務(wù),十載扎賚諾爾做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
<!--自定義組件--> <template> <!--結(jié)構(gòu)層--> <div id="star"> <span v-for="classn in starArrs" :class="classn" class="staritem"></span> <!--<span class="staritem onstar"></span> <span class="staritem onstar"></span> <span class="staritem halfstar"></span> <span class="staritem offstar"></span>--> <!--根據(jù)傳遞過來的分?jǐn)?shù)得到對應(yīng)的星星 4.7 四顆半星 1個位數(shù)代表的是全里亮, 2,當(dāng)分?jǐn)?shù)大于等于0.5 是一個半星 3.當(dāng)全星和半星不足五個的時候,剩下的都是灰色的星星 --> </div> </template> <script> // 行為 export default{ props:['score'], created(){ console.log("子組件"); }, mounted(){ console.log("打印傳遞的分?jǐn)?shù)"); }, computed:{ starArrs(){ var starArr=[]; //3.9 // 全星星的個數(shù) let onstar = parseInt(this.score); console.log(onstar) // 是否有半星 let halfStar = Math.round(this.score-onstar)?true:false; // 有多少課灰色的星星 for (var i=0;i<onstar;i++) { starArr.push('onstar') } if(halfStar){ starArr.push('halfstar') } while(starArr.length<5){ starArr.push('offstar') } return starArr; } } } </script> <style scoped="scoped"> /*獨立作用域的樣式*/ .staritem{ display: inline-block; width: 0.37037rem; height: 0.37037rem; } /*全星星*/ .onstar{ background: url(./star24_on@2x.png); background-size: 0.37037rem; } .halfstar{ background: url('./star24_half@2x.png'); } .offstar{ background: url('./star24_off@2x.png'); } </style>
背景圖
star24_on@2x.png
star24_half@2x.png
star24_off@2x.png
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)簡單的星級評分組件源碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
分享名稱:vue實現(xiàn)簡單的星級評分組件源碼
鏈接分享:http://bm7419.com/article46/ijhdeg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站排名、靜態(tài)網(wǎng)站、定制開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)