基于Vue的星级评分

最新推荐文章于 2024-05-30 09:57:09 发布
最新推荐文章于 2024-05-30 09:57:09 发布
阅读量1.2w 收藏 20
点赞数 6
分类专栏： Vue 文章标签： 星级评分
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16371909/article/details/79352348
版权

年前的一个项目中做到一个星级评分功能，以前都是用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-m
最低0.47元/天 解锁文章
夏尔の
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue实现星级评价效果
回忆的夏天
12-29 1008
我们把星级评价单独做成一个Star组件，抽离出来，其中父组件中引入(传入的是评分的值) <div class="score"> <Star :score="poiInfo.wm_poi_score"></Star> </div> 初始Star.vue <template> <div> <div ...
基于Vue的星级评分功能
02-23
基于Vue的星级打分功能，代码一共才70行，非常的简单易用，解压即可运行看效果 ，代码注释十分详细，思路都在！2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
五分钟用vue实现一个五星打分效果
weixin_33698043的博客
02-21 817
实现一个像这样的五星打分 &lt;template&gt; &lt;div&gt; &lt;div class="mask"&gt; &lt;div class="pop"&gt;&lt;/div&gt; &lt;div class="box center_box"...
推荐Vue Rate：一款强大的评分组件
最新发布
gitblog_00098的博客
05-30 323
推荐Vue Rate：一款强大的评分组件 项目地址:https://gitcode.com/SinanMtl/vue-rate Vue Rate是一款专为Vue 3设计的星级评分组件，提供直观且易于定制化的用户体验。其简洁的API和灵活的设计使其成为任何需要用户评价功能的应用的理想选择。 项目介绍 Vue Rate为您提供了一个轻巧但功能齐全的解决方案，用于在您的应用中添加评分功能。只需几行代码，...
vue 商品星级评价
weixin_30929195的博客
05-05 245
<template> <div id="shoplist"> <p class="all" > <input type="radio" name="b" value="0" v-model="inputdata"/> <span>★</span> ...
Vue实现星级评价
조국화
04-25 442
1、本文五角星采用的阿里巴巴矢量图标库； 2、数据内容可根据实际需求进行改动； 3、主要实现了鼠标滑动改变样式，鼠标离开样式消失，鼠标点击对应的五角星样式被改变及完成评价； 4、本文章只是简单的实现了功能，仅做参考！ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
基于Vue的星星评分评级系统设计源码
05-26
本项目是基于Vue的星星评分评级系统设计源码，包含27个文件，其中包括13个Vue文件、4个JavaScript文件、3个PNG图片文件、2个JSON文件、1个browserslistrc文件、1个gitignore文件、1个Markdown文档、1个ICO文件和1个...
星级评分组件vue-ratingStar
06-11
Vue Rating Star组件是基于Vue.js设计的一个用于实现星级评分功能的组件。这个组件通常用于评价系统，如电影评分、产品评价或者用户反馈，使得用户可以直观地给出他们的满意度评分。 在Vue Rating Star组件中，主要...
vue2.0实现前端星星评分功能组件实例代码
08-28
Vue2.0实现前端星星评分功能组件实例代码 本资源提供了一个使用Vue2.0实现的前端星星评分功能组件的实例代码。该组件可以在Web应用程序中使用，提供了一个交互式的星星评分功能。 知识点1： Vue2.0模板语法 在该...
星级评分，支持移动端
12-18
本项目是基于JavaScript库jQuery（版本1.x）开发的一个星级评分插件，特别强调了对移动端的支持。以下是关于这个星级评分插件的详细知识点介绍： 1. **jQuery库**： - jQuery是一个轻量级、高性能的JavaScript库，...
vue 星级评分 ——简单版
YYY1920的博客
06-06 1771
vue 星级评分 ——简单版 此星级评分超级简单 好用高效 适用于多种场景 三目运算 代码如下 html 部分 // An highlighted block <template> <div> <div style="display: inline-block" v-for="(num,index) in 6" :key="index" @cl...
vue实现评价星星功能
10-15
主要为大家详细介绍了vue实现评价星星功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue报表系统
03-12
这是用vue.js开发的报表系统前端，其中包括表格、饼状图、柱状图、折线图、侧边导航栏，饼状图、柱状图、折线图使用了vchart插件，通过axios技术与后台交互
Vue_实现五星好评效果
weixin_30873847的博客
05-06 1022
一、前言 我们在做美团之类的app的时候，很多时候要显示五星好评，下面就用vue来实现这个将数字用图形显示的效果 二、主要内容 ...
vue实现成绩表
qq_48294048的博客
10-16 4438
需求： 使用 table 表格的方式渲染出如下学生成绩信息，其中成绩>=90，显示“优秀"；80<= 成绩<90，显示“良好"，60<=成绩<80，显示及格；成绩<60，显示“不及格"。成绩大于等于 90 分的学员，背景使用“#7DB3FA"高亮显示 数据： [ {id: 1,name: '诸葛亮',sex: '男',score: 98}, {id: 2,name: '周瑜',sex: '男',score: 88}, {id: 3,name: '刘...
vue实现table评分表
八佾舞于庭
10-19 2027
&lt;template&gt; &lt;div class="ss_scoreTable"&gt; &lt;table border="1" cellpadding="0" cellspacing="0"&gt; &lt;!--caption定义的是表格的标题--&gt; &lt;caption&am
Vue星级评分(为自己做个笔记)
qq_43622789的博客
04-01 424
页面： <div> <span>Stars测评:{{starNum}}颗</span> <div> <img v-for="(star,index) in stars" v-bind:src="star.src" v-on:click="rating(index)"/> </div> </div&gt...
使用vue简单实现星级评价
gergerfrgegregfd的博客
11-08 2738
使用vue简单实现星级评价
jquery仿element实现评分
梅花寺
10-21 340
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
vue 星星评分 4.89
07-10
在Vue中实现星星评分时，如果评分是4.89，你可以将初始评分值设置为4.89，然后在StarRating组件中进行相应的修改。 在父组件中，将初始评分值设置为4.89： ```vue <template> <div> <h2>Your Rating: {{ rating }}</h2> <star-rating :max-stars="5" :initial-rating="4.89" @update-rating="updateRating"></star-rating> </div> </template> ``` 然后在StarRating组件中，将currentRating改为一个浮点数： ```javascript data() { return { currentRating: Math.floor(this.initialRating) }; }, ``` 修改updateRating方法，接受一个浮点数rating值： ```javascript updateRating(rating) { this.currentRating = Math.floor(rating); }, ``` 最后，在模板中根据currentRating的整数部分和小数部分来确定是否显示半星： ```html <template> <div class="star-rating"> <span v-for="index in maxStars" :key="index" class="star" :class="{ 'filled': index <= currentRating }"> ★ </span> <span v-if="currentRating < maxStars && currentRating + 0.5 >= maxStars" class="star-half filled"> ★ </span> </div> </template> ``` 通过上述修改，你就可以在Vue中实现4.89的星星评分，并显示半颗星。记得根据需要进一步调整样式和交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值