vue写星星评分组件

<template>
    <div>
        <i v-for="(v,i) in 5"  :key='i' class="iconfont " @mouseover="disabled ?'': curScore=i+1" @mouseout="disabled ?'':curScore=''" @click="getScore(i+1)" :class="getClass(i)">
        </i>
    </div>
</template>
<script>
export default {
    name:'MyRate',
    data() {
        return {
            curScore:'',
            disabled:false
        }
    },
    props:['score'],
    methods: {
        getScore(v){
            this.$emit('update:score',v)
        },
        getClass(i){
            if(this.curScore === ''){
            return i <= this.score-1? 'icon-star':'icon-xingxing'
            }else{
            return i <= this.curScore-1? 'icon-star':'icon-xingxing'
            }

        }
    },
}
</script>
<style scoped>

</style>

引入星星icon图标

其他页面引入

<template>
  <div class="hello" >
 <my-rate  :score.sync='score'/>
  </div>
</template>

<script>
import myRate from './myrate'
export default {
  name: 'HelloWorld',
  data () {
    return {
      score:2
    }
  },
    components: {
    myRate
  },
  watch: {
    score(){
      console.log(this.score)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>