Rate 组件常用于对事物评级使用，如商品的质量、用户对服务的满意度等各种评级功能实现，都离不开Rate组件的使用，该组件可以自定义显示的图标、数量和样式，还能显示半星的评分效果，当用户点击图标时，可以获取到最后的评分值。
Rate组件常用的属性如下表11-7所示。
接下来通过一个完整的案例来演示使用Rate组件实现的效果。
实例11-5 Rate组件
1. 功能描述
创建一个页面，添加多个van-rate组件，分别用于正常显示星状图标、自定义爱心图标、半星图标和自定义数量的图标。
2. 实现代码
在项目的components 文件夹中，添加一个名为“Rate”的.vue文件，该文件的保存路径是“components/ch11/form/”，在文件中加入如清单11-5所示代码。
代码清单11-5 Rate.vue代码
<template><h3>Rate 组件</h3><div class="row"><p>基础用法</p><van-rate v-model="value" /></div><div class="row"><p>自定义图标</p><van-rate v-model="value" icon="like" void-icon="like-o" /></div><div class="row"><p>半星</p><van-rate v-model="value2" allow-half /></div><div class="row"><p>自定义数量</p><van-rate v-model="value" :count="6" /></div>
</template>
<script>
export default {data() {return {value: 3,value2: 2.5}}
}
</script>
<style scoped>
.row {margin: 10px 0;padding: 10px 0;border-bottom: solid 1px #eee;
}
</style>3. 页面效果
保存代码后，页面在Chrome浏览器下执行的页面效果如图11-7所示。
4. 源码分析
van-rate组件不仅可以显示各种状态和数量的评分，还可以绑定组件的change事件，当点评值发生变化后，触发该事件，在该事件中获取到currentValue值，即当前点评的最新值，可以将该值提交给相应接口，实现评分数据的保存功能。
