Vue 头部动态添加数据

上篇文章 我们已经完成了头部和中间部分的骨架搭建,现在我们来开发头部的css代码吧

Vue 头部动态添加数据_第1张图片


第一步 连接data.json获得图片以及品牌名称及基础数据

在header.vue 中template中写入


这样就可以获取到商铺图片。

我们可以去data.json文件中看看seller.avatar 


 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",是这样的

第二步获取商铺名称

Vue 头部动态添加数据_第2张图片

我们可以去data.json文件中看看seller.name

 "name": "粥品香坊(回龙观)",

第三步 获取配送时间


第四步 获取在线减满


第五步获取介绍


补:获取长度

{{seller.supports.length}}个

第六步 编写css



在来看看整体的header.vue







这样头部就已经完成了 


你可能感兴趣的:(vue.js开发饿了么)