基于Vue的星级评分

最新推荐文章于 2024-06-19 15:33:49 发布
最新推荐文章于 2024-06-19 15:33:49 发布
阅读量1.3w 收藏 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简单实现星级评价
gergerfrgegregfd的博客
11-08 2754
使用vue简单实现星级评价
vue实现成绩表
qq_48294048的博客
10-16 4449
需求： 使用 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框架实现表情打分效果
m0_65607651的博客
09-21 263
vue框架实现表情打分效果(类似于小程序 移动端的打分效果一致) 无需插件!!
如何在Vue3中创建一个星级评分组件
最新发布
有我更精彩的博客
06-19 468
在现代web开发中，用户体验至关重要。星级评分组件作为交互设计中的一个常见元素，广泛应用于电商平台、餐厅点评网站、电影评分系统等。今天，我们将详细介绍如何在Vue3中创建一个星级评分组件，从零开始一步一步构建，希望能帮助到各位前端开发者。
vue实现table评分表
八佾舞于庭
10-19 2036
&lt;template&gt; &lt;div class="ss_scoreTable"&gt; &lt;table border="1" cellpadding="0" cellspacing="0"&gt; &lt;!--caption定义的是表格的标题--&gt; &lt;caption&am
jquery仿element实现评分
梅花寺
10-21 348
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
利用Vue的计算属性计算平均值&总成绩
老婆就是要败家
08-11 8546
vue给我们提供了一个特别好的解决方案叫：计算属性 计算属性是vue实例中的一个配置选项：computed 通常里面都是一个个计算相关的函数，返回最后计算出来的值。 即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>成绩分析系统</title> </hea
Vue手动封装实现一个五星评价得效果
歌谣的博客
04-01 2633
我是歌谣 放弃很难 但是坚持一定很酷 微信公众号关注小歌谣 一起学习前后端知识 今天要说得是实现一个vue中实现五星评价得效果 简单来说 就是封装组件把 具体需要我们了解组件间得相互传值 数据绑定等知识 先用脚手架起个项目先 脚手架启动 ​ 安装依赖 包括 npm install sass-loader@7.1.0 --save npm install style-loader npm install node-sass 安装好对应得版本之后 我们看一下整个文件得目录结构 目录结构 目录结构看完.
一个简陋的Vue星星评级
hot_boom_dog的博客
08-01 238
<template> <div id="star"> <div class="ImgDiv" :class="[{WhiteImg:num < key},{blackImg:num>=key}]" v-for="(index,key) in 5" :key="key" @mouseenter="EnterStarNum(key)">&lt...
基于Vue的星级评分功能
02-23
以上就是基于Vue实现星级评分功能的基本思路。通过70行左右的代码，我们可以创建一个简洁、易用且具有交互性的星级评分组件。这个组件可以轻松地嵌入到任何Vue应用中，提供直观的用户体验。尽管描述中提到的更新日期...
vue报表系统
03-12
这是用vue.js开发的报表系统前端，其中包括表格、饼状图、柱状图、折线图、侧边导航栏，饼状图、柱状图、折线图使用了vchart插件，通过axios技术与后台交互
基于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库，...
iOS 类似美团或饿了么评价中的星星评分控件
weixin_30596023的博客
09-12 319
1.做的好几个项目都用到了评分控件，可以用来展示评分，也可以用来写评分，图片和间距大小都可以定制，之前就已经简单封装了一个，现在把它分享出来，有需要的拿去用。 2.下面是展示截图： image.png image.png 3.代码 https://github.com/alan12138/Custom-Control/tree/mast...
基于Vue的电商星星评价demo
fjxylin
06-15 550
基于Vue的电商星星评价demo封装组件注册组件设计事件绑定事件 封装组件 首先需要封装星星评价组件，通常每个评分项为五个星组成，使用v-for循环渲染出五个星星。 var Star={ template:`<div> <span class="iconfont icon-xing" v-for="i in 5" ></span> </div>`, }; 注册组件 设计好组件样式先在vue实例中注册组件,在html中使用，检测是否符合
h5悬浮弹窗+评分组件的封装
m0_52107471的博客
06-08 907
1.需求: (1)有一个图标(由图片和"X"组成)位于屏幕右边,屏幕滑动,隐藏自身的一半,并且透明度减半,不在操作3秒后恢复原状 (2)点击x以后,如果页面是首次进入,显示悬浮窗,如果是页面刷新不显示悬浮窗 (3)点击悬浮图片,显示一个dialog的对话框,当中包含标题,图片,评分,文本框,按钮.评分默认是0星,提交按钮是不可点击的灰色状态,选择星星以后颜色变为紫色并且可以点击 2.代码 (1)rate评分组件(改写自iview的底层代码) <template> <div cl
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、付费专栏及课程。

余额充值