本文例項為大家分享了vue實現評價星星的具體程式碼，供大家參考，具體內容如下

程式碼：

<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("點選了"+(i+1)+"顆星")
 }
 },}
</script>
 
<style scoped>
.StarsWrap{
 width: 100%;
 height: 0.2rem;
 margin: 0.1rem 0;
}
.StarsWrap li{
 float: left;
 margin-right: 0.1rem;
}
</style>

關於vue.js元件的教程，請大家點選專題vue.js元件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。