vue實(shí)現(xiàn)評價(jià)星星功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)評價(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: ['非常不滿意,各方面都很差', '不滿意,比較差', '一般,還需改善', '比較滿意,仍可改善', '非常滿意,無可挑剔'], 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組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解webpack + vue + node 打造單頁面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁面(入門篇) ,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程
在Vue中使用JSON文件有多種方式,包括使用fetch方法加載JSON文件、使用axios庫加載JSON文件,以及將JSON文件導(dǎo)入為模塊,這篇文章主要介紹了Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程,需要的朋友可以參考下2024-01-01vue-router 源碼之實(shí)現(xiàn)一個(gè)簡單的 vue-router
這篇文章主要介紹了vue-router 源碼之實(shí)現(xiàn)一個(gè)簡單的 vue-router,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧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動畫庫的步驟詳解
Lottie 是一個(gè)由 Airbnb 開源的動畫庫,它允許你在 Web、iOS、Android 等平臺上使用體積小、高性能的體驗(yàn)豐富的矢量動畫,本文將詳細(xì)介紹在 Vue 項(xiàng)目中如何集成和使用 Lottie,文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue+echarts實(shí)現(xiàn)可拖動節(jié)點(diǎn)的折線圖(支持拖動方向和上下限的設(shè)置)
制作一個(gè)折線圖用于顯示當(dāng)前24小時(shí)的數(shù)據(jù),并且可以通過拖動折現(xiàn)圖設(shè)置數(shù)據(jù),接下來通過本文給大家分享vue+echarts實(shí)現(xiàn)可拖動節(jié)點(diǎn)的折線圖(支持拖動方向和上下限的設(shè)置),感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)
這篇文章主要介紹了Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04