介绍 vue的优点 //,评分
,等级:function (指数,字符串),{
var 才能;total =, this.stars.length //,星星总数
var 才能;idx =, index +, 1,//,这代表选的第idx颗星,也代表应该显示的星星数量//,才能进入如果说明页面为初始状态
if 才能;(this.scoreStartNum ===, 0), {
,,this.scoreStartNum =idx
,,for (var 小姐:=,0;,小姐:& lt;, idx;,我+ +),{
,,this.stars[我].src =starOnImg
,,this.stars[我].active =,真的
,,}
,,},{else
,,//,如果再次点击当前选中的星级——仅取消掉当前星级,保留之前的。
,,if (idx ==, this.scoreStartNum), {
,,for (var 小姐:=,指数;,小姐:& lt;,总;,我+ +),{
,,,if (小姐:!=,0),{
,,,this.stars[我].src =starOffImg
,,,this.stars[我].active =false
,,,}
,,}
,,}
,,//,如果小于当前最高星级,则直接保留当前星级
,,if (idx & lt;, this.scoreStartNum), {
,,for (var 小姐:=,idx;,小姐:& lt;, this.scoreStartNum;,我+ +),{
,,,if (小姐:!=,0),{
,,,this.stars[我].src =starOffImg
,,,this.stars[我].active =false
,,,}
,,}
,,}
,,//,如果大于当前星级,则直接选到该星级
,,if (idx 祝辞,this.scoreStartNum), {
,,for (var 小姐:=,0;,小姐:& lt;, idx;,我+ +),{
,,,this.stars[我].src =starOnImg
,,,this.stars[我].active =,真的
,,}
,,}
,,var count =, 0,//,计数器——统计当前有几颗星
,,for (var 小姐:=,0;,小姐:& lt;,总;,我+ +),{
,,if (this.stars[我].active), {
,,,+ +
,,}
,,}
,,this.scoreStartNum =,计数
,,}
if 才能;(this.scoreStartNum ===, 1), {
,,this.scoreInfo =, & # 39;很差& # 39;
,,},else if (===this.scoreStartNum 2), {
,,this.scoreInfo =, & # 39;差& # 39;
,,},else if (===this.scoreStartNum 3), {
,,this.scoreInfo =, & # 39;一般& # 39;
,,},else if (===this.scoreStartNum 4), {
,,this.scoreInfo =, & # 39;满意& # 39;
,,},else if (===this.scoreStartNum 5), {
,,this.scoreInfo =, & # 39;很满意& # 39;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关vue如何实现类似淘宝商品评价页面星级评价及上传多张图片功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
实现效果图如下所示:
评价页
点击看大图,且可左右滑动
<强>功能需求分析
1。默认为5颗星,为非常满意,4颗满意,根据不同星级显示不同满意程度。
, 2。评价内容,最多为200字。
, 3。上传图片最多上传6张图片不可拉伸,可删除,可点击放大左右滑动展示
<强>具体实现关键代码
,关于星级功能:
,写一个五星数组,默认数组中有亮的星级图片,用bool值判断是否变暗只
<强>,,,,默认星级数组,
,点击实现的关键代码:
