开发者社区> 廊桥梦醉> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

VUE实现评分效果和不同类型分数展示效果组件

简介: 一、在开发的过程中会可能会遇到下图这样的评分效果,下面就来看看这种效果用vue如何实现 效果图 图片发自简书App HTML部分 图片发自简书App CSS部分 图片发自简书App JS部分 图片发自简书App 二、项目的开发过程,经常会遇到评价分数的展示,下边我们就来实现以下,不同类型不同大小,可以在任意使用的分数展示的vue组件,计算属性来动态添加不同的样式。
+关注继续查看

一、在开发的过程中会可能会遇到下图这样的评分效果,下面就来看看这种效果用vue如何实现

效果图

img_c28ff381ad143471624e726606532a60.jpe
图片发自简书App

HTML部分

img_bcf5c1928c22353ed79391ff3b3b08b5.jpe
图片发自简书App

CSS部分

img_34de4f0afa7d10a12722dc706da9241c.jpe
图片发自简书App

JS部分

img_df7656f9541a89dced6966185f06c2d2.jpe
图片发自简书App

二、项目的开发过程,经常会遇到评价分数的展示,下边我们就来实现以下,不同类型不同大小,可以在任意使用的分数展示的vue组件,计算属性来动态添加不同的样式。

当时4.8分的时候展示效果如下

img_c28ff381ad143471624e726606532a60.jpe

只要应用的技术是vue中的computed来计算属性,根基不同的属性添加不同的类,代码实现如下

html结构

img_8512abbd1c042f7bc1ff0e361368af94.png

css样式

img_a5e8763214e72425870bb2a66596d864.png

js中的属性计算(重点)

根据size跟score的值的不同来计算添加哪一个样式

img_a3adc466004824b05773dcdb3661f5ca.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于Vue实现多标签选择器
基于Vue实现多标签选择器
0 0
Vue基于$attrs及$listeners实现隔代通信
Vue基于$attrs及$listeners实现隔代通信
0 0
基于Vue实现多标签选择器
基于Vue实现多标签选择器
0 0
Vue:通过Object.defineProperty实现一个简易的MiniVue
Vue:通过Object.defineProperty实现一个简易的MiniVue
0 0
Vue.js实现文字超出指定高度后展开收起功能
Vue.js实现文字超出指定高度后展开收起功能
0 0
Vue:countup.js实现数字增长动画
Vue:countup.js实现数字增长动画
0 0
Vue:xlsx实现Excel文件的导入导出
Vue:xlsx实现Excel文件的导入导出
0 0
Vue:a标签点击和file-saver实现文件下载
Vue:a标签点击和file-saver实现文件下载
0 0
Vue实现导航栏吸顶效果
Vue实现导航栏吸顶效果
0 0
Vue实现导航栏吸顶效果
Vue实现导航栏吸顶效果
0 0
+关注
廊桥梦醉
对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载