小组件1.星星评论组件

一.使用vue.js+element-ui写星星评论组件

当vue.js与element-ui相附使用时，element-ui的icon图标中有星星图案的图标，使用起来比较方便，不需要再使用css写星星的形状。
效果图：

代码如下：

<template>
  <div class="score">
    <i v-for="i in 5" :key="i" class="el-icon-star-on" :style="{color:i < val ? '#f2c304' : '#cbc9ca'}"></i>
  </div>
</template>

<script>

  export default {
    name:'',
    data () {
      return {
          val:3
      };
    },
    components: {},
    mounted() {},
    methods: {},
    watch: {}
  }
</script>
<style lang='scss' scoped>
    .score{
        border:1px solid red;
        width:110px;
        height:30px;
        font-size: 20px;
    }
</style>