@[TOC]vue.js高仿饿了吗实现tips

高仿饿了吗–tip1

动态评星

目标：根据商家的星级生成指定的五行样式
注意点

无论星级多少，星星的个数都是五颗，所以利用v-for循环生成
利用内联标签span来生成每个星星，样式可以利用不同的背景图片
需要计算出满星的有几个，半星最多只有一个，空星有几个

template

<div class="ratingStar"><span class='star' v-for='(star,index) in stars' :key=index :class='star'></span>
</div>

css

.star{display:inline-block;width:20px;height:20px;background-repeat:no-repeat;
}
.full{background-image:url('star24_on@2x.png');
}
.half{background-image:url('star24_half@2x.png');
}
.empty{background-image: url('star24_off@2x.png');
}

 stars(){let full=parseInt(this.score)let half=this.score-full>0.5?1:0let result=['empty','empty','empty','empty','empty']for(let i=0;i<full;i++){result[i]='full'}if(half>0){result[full]='half'}return result}

这就是四星半的效果了

关键在于

 v-for='(star,index) in stars' :key=index :class='star'

拿到每个星星的样式，然后对样式进行循环，通过：class绑定循环出来的类样式

vue.js高仿饿了吗实现tips相关推荐

Vue.js高仿饿了么外卖App学习记录
(给达达前端加星标,提升前端技能) 开发一款vue.js开发一款app,使用vue.js是一款高效的mvvm框架,它轻量,高效,组件化,数据驱动等功能便于开发.使用vue.js开发移动端app,学会使 ...
项目：Vue.js高仿饿了吗外卖APP（一）
Vue.js高仿饿了吗外卖APP核心知识使用Vue.js作为项目的技术栈!这是目前最火的MVVM框架(之一),轻量.简洁.高效.数据驱动.组件化的优点,被大家称为"简单却不失优雅,小巧而不 ...
Vue.js 高仿饿了么外卖APP
第1章课程简介介绍课程的学习目标和学习内容. 1-1 课程简介 1-2 课程安排第2章 Vuejs介绍从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angu ...
项目：Vue.js高仿饿了吗外卖APP（二）
[vue]饿了吗项目 – goods商品列表开发 (PS:结合自己这几天看的,以及前人给出的经验,借鉴他人的博客,总结出下面的内容) 1.flex 属性是 flex-grow.flex-shrink ...
【慕课网实战课程笔记】Vue.js高仿饿了么外卖App
写在前面:该课程为慕课网付费课程,笔记内容代码居多.内容简略,仅供自己日后翻阅.如有疑问或者不妥,欢迎提出指正,我看到了会回复,谢谢! 第1章:课程简介第2章:Vuejs介绍 Ctrl+Alt+l ...
vue结合饿了么_Vue.js 高仿饿了么外卖app 全套_IT教程网
资源名称:Vue.js 高仿饿了么外卖app 全套资源目录: vue仿饿了么视频全套全套资源 │ files.txt │ project.zip │ resource.zip │ ├─第01 ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...
Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
原文https://www.cnblogs.com/ljq66/p/9980372.html 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知 ...

vue.js高仿饿了吗实现tips

高仿饿了吗–tip1

动态评星

vue.js高仿饿了吗实现tips相关推荐

最新文章

热门文章