基于Vue的星级评分

原创

于 2018-02-23 14:04:14 发布 · 1.3w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#星级评分

本文介绍如何在年前的项目中实现一个基于Vue的星级评分功能，避免使用较大体积的第三方库。通过70行代码，实现了星星数量和样式的自定义，详细代码和实现思路在内容中给出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

年前的一个项目中做到一个星级评分功能，以前都是用jquery.raty.js这款插件来做的，这个插件确实封装的很方便也很好用，但是毕竟是一个函数库（考虑各种适配，健壮，可扩展），代码行数还是有一点的，所以这次自己写了一个，70行搞定，星星数量，样式自己都可以设置，为了保留思路，我没有进行彻底的抽象封装。

效果图如下：
这里写图片描述

代码如下，思路都在注释里！

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>星星打分</title>
    </head>

    <body>

        <div id="app" class="row">
            <div class="form-group clearfix">
                <label class="control-label col-md-4">星星数量:{
   
   {