Vue2.x开发饿了么项目（header部分）

header组件开发数据之间的传递

App.vue 引入组件，App.vue 中注册组件，使用组件时要记得传入seller参数

通过父组件向子组件传递数据
在父组件中需要将sellerO作为数据导出，子组件通过props从父组件中获得数据，且要指定数据类型

export default {props:{  //  子组件获取 父组件 数据sell:{type:Object // 传递的类型 }}}
复制代码

然后在header组件里面调用数据就出来写入基本的样式

header组件的弹出层

v-show设置一个状态，判断该状态控制显示隐藏 @click 绑定点击事件,通过methods 方法改变状态，控制显隐效果

星级评分

绑定class 控制星级大小的类型通过计算属性计算星星大小

//  利用 computed 属性
<div class="star" :class="starSizeType"></div>
computed: {starSizeType() { //  返回 星级的大小类型  48/36/24return 'star-' + this.size;}
}
复制代码

遍历星星的数量

定义常量控制每个星的状态

// 类名用变量存起来
const LENGTH = 5  //  星星长度
const CLS_ON = 'on'  // 全星
const CLS_HALF = 'half' // 半星
const CLS_OFF = 'off'// 空星
复制代码

通过计算判断每个span 的类型

itemClasses () {  //  返回一个数组为每个span 的类名  （遍历）let spanClassList=[];// 利用 实参评分来判断 有几颗全星，半星，空星let scores=( Math.floor(this.score * 2) ) / 2 let intNum= Math.floor(scores); // 全星个数  let HashalfNum= scores % 1 !== 0   // 半星for(var i=0;i<intNum;i++){ // 遍历全星的spanspanClassList.push(CLS_ON)}if(HashalfNum){ //  如果有半星  加类名spanClassList.push(CLS_HALF)}while(spanClassList.length<LENGTH){//  判断 是否有空星 及个数spanClassList.push(CLS_OFF)}return spanClassList;          }
}
复制代码

通过动态绑定class 来给span 加类名

<div class="star" :class="starSizeType"><span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
</div>
复制代码

转载于:https://juejin.im/post/5c1b5e796fb9a049f66c12b3

Vue2.x开发饿了么项目（header部分）相关推荐

vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
最新 vue2.x 仿饿了么app商家页面项目总结
最新vue2.x仿饿了么app 商家页面项目总结标签(空格分隔): vuejs 前言仿饿了么app是基于vue2.x最新实战项目,用到的技术栈 vue2 + vue-router2 + vue- ...
vue2.0仿饿了么webAPP项目
# webapp vue2.x仿饿了么app项目总结项目地址:https://github.com/harrietjia/vue2-webapp.git 如果觉得有帮助,希望可以在右上角给我个sta ...
饿了吗app都是用html写的,Vue2.0仿饿了么webapp单页面应用详细步骤
这篇文章主要为大家详细介绍了Vue2.0仿饿了么webapp单页面应用详细步骤,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 部分截图 [图片暂 ...
Taro多端开发实现原理与项目实战(二)
Taro多端开发实现原理与项目实战(二) 多端电商平台项目概述及开发准备学习了前面的基础知识和进阶后是否跃跃欲试?我们准备了一个电商平台的项目来和大家一起实践使用 Taro 开发电商平台. 项目概述 ...
Taro多端开发实现原理与项目实战(一)
Taro 多端开发实现原理与项目实战前端多端统一开发背景与趋势介绍背景「大前端」不仅会成为移动开发与 Web 前端的发展趋势,也会是未来的显示设备终端的开发技术趋势? 越来越多的业内人士对此表示 ...
《Node.js开发指南》MicroBlog项目的问题汇总
重要说明:本博已迁移到石佳劼的博客,有疑问请到文章新地址留言!!! 最近对Node产生了点兴趣,就看了<Node.js开发指南>一书,按照书中的例子敲完了所有代码.书是好书,非常适合 ...
uni-app开发流程一（项目搭建）
uni-app其实是DCloud推出的众多产品之一,当然我只研究目前能用到的 DCloud的官网:https://www.dcloud.io/ uni-app的官网:https://uniapp.dc ...
后端开发实践——Spring Boot项目模板
在我的工作中,我从零开始搭建了不少软件项目,其中包含了基础代码框架和持续集成基础设施等,这些内容在敏捷开发中通常被称为"第0个迭代"要做的事情.但是,当项目运行了一段时间之后再来反 ...

Vue2.x开发饿了么项目（header部分）

header组件开发数据之间的传递

header组件的弹出层

星级评分

Vue2.x开发饿了么项目（header部分）相关推荐

最新文章

热门文章

Vue2.x开发饿了么项目（header部分）

header组件开发 数据之间的传递

header组件的弹出层

星级评分

Vue2.x开发饿了么项目（header部分）相关推荐

最新文章

热门文章

header组件开发数据之间的传递