vue實(shí)現(xiàn)評(píng)價(jià)星星功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)評(píng)價(jià)星星的具體代碼,供大家參考,具體內(nèi)容如下
代碼:
<template> <ul class="StarsWrap"> <li v-for="(i,index) in list" :key="index" @click="clickStars(index)"> <img :src="xing>index?stara:starb"/> </li> </ul> <p>{{rateScoreText}}</p> </template> <script> export default { name: 'evaluate', data () { return { rateScoreText: '', rateScoreDesc: ['非常不滿意,各方面都很差', '不滿意,比較差', '一般,還需改善', '比較滿意,仍可改善', '非常滿意,無(wú)可挑剔'], stara:'../../static/img/details/shoucang.png',//亮星星 list:[0,1,2,3,4], starb:'../../static/img/details/shouc.png',//暗星星 xing:0, } }, methods:{ clickStars(i){ this.rateScoreText=this.rateScoreDesc[i] this.xing = i+1 console.log("點(diǎn)擊了"+(i+1)+"顆星") } }, } </script> <style scoped> .StarsWrap{ width: 100%; height: 0.2rem; margin: 0.1rem 0; } .StarsWrap li{ float: left; margin-right: 0.1rem; } </style>
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解webpack + vue + node 打造單頁(yè)面(入門(mén)篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁(yè)面(入門(mén)篇) ,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程
在Vue中使用JSON文件有多種方式,包括使用fetch方法加載JSON文件、使用axios庫(kù)加載JSON文件,以及將JSON文件導(dǎo)入為模塊,這篇文章主要介紹了Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程,需要的朋友可以參考下2024-01-01vue-router 源碼之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vue-router
這篇文章主要介紹了vue-router 源碼之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vue-router,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化
這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09在Vue項(xiàng)目中集成和使用Lottie動(dòng)畫(huà)庫(kù)的步驟詳解
Lottie 是一個(gè)由 Airbnb 開(kāi)源的動(dòng)畫(huà)庫(kù),它允許你在 Web、iOS、Android 等平臺(tái)上使用體積小、高性能的體驗(yàn)豐富的矢量動(dòng)畫(huà),本文將詳細(xì)介紹在 Vue 項(xiàng)目中如何集成和使用 Lottie,文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖(支持拖動(dòng)方向和上下限的設(shè)置)
制作一個(gè)折線圖用于顯示當(dāng)前24小時(shí)的數(shù)據(jù),并且可以通過(guò)拖動(dòng)折現(xiàn)圖設(shè)置數(shù)據(jù),接下來(lái)通過(guò)本文給大家分享vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖(支持拖動(dòng)方向和上下限的設(shè)置),感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)
這篇文章主要介紹了Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04