Rate评分我们经常在大众点评，电影，淘宝等等很多平台上看到过，虽然是个小组件，但是如果不封装起来每次每新写确实相当麻烦，Vant封装的这个组件相当简单好用，简单几行就搞定！腻害了！
准备工作：
- 创建一个页面: Rate.vue
- 在router.js里配置Rate页面的路由
{
path: '/rate',
name: 'rate',
component: () => import('./views/Rate.vue')
}
- 在index.vue里添加一项
<a href="javascript:void(0)" @click="$router.push('/rate')">
<van-col span="6" class="marb20">
<van-icon name="pending-deliver" />
<div>Rate 评分</div>
</van-col>
</a>
至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了23个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。
代码演示Rate评分：
简单二步就搞定：
<van-rate
v-model="value"
/>
data() {
return {
value: 3
}
},
二步就可以将Rate的默认样式显示出来！相当方便了。
当然，这个图标，还有其它样式，我们也是可以自定义的。我们改下它的图标(icon没有改成功)：
<van-rate v-model="value" :size="25" :count="5" color="red" void-color="#eee" />
count：图标的个数
color：图标的颜色
void-color：未选中图标的颜色
Rate评分还支持change事件，当Rate改变时，触发此事件：
onChange(value) {
console.log(value)
},
有了Rate评份，我们再也不怕麻烦了！
今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油