VUE2.0 饿了吗视频学习笔记(五):父子对象传递、显示图片
一、父子组件之间对象传递
1、app.Vue中的v-header 中加入 v-bind:seller="seller"
template>
<div id="app">
<v-header v-bind:seller="seller"></v-header>
<div class="tab">
<div class="tab-item">
2、header.vue组件中加入代码,注意不能直接使用src="seller.avatar",如果使用链接应该可以。
<template>
<div class="header">
<div class="content-wrapper">
<div class="avatar">
<img width="64" height="64" :src="seller.avatar">
</div>
</div>
</div>
</template>
3、运行效果
二、图片文字保持在同一行
<style lang="stylus" rel="stylesheet/stylus">
.header
color: #fff
background: #000000
.content-wrapper
padding: 24px 12px 18px 24px
font-size 0px
.avatar
display: inline-block
.content
display: inline-block
font-size 16px
</style>
font-size 0px为了消除空白字符。font-size: 0;解决inline元素间的空白间隙
三、自动使用2X,3X图片
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")

VUE2.0 饿了吗视频学习笔记(五):父子对象传递、显示图片的更多相关文章
- VUE2.0 饿了吗视频学习笔记(四):颜色、跳转、设置、vue-resource
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 1.设置选中项颜色 <template> <div id=" ...
- VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table
一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...
- VUE2.0 饿了吗视频学习笔记(六):定位问题、文字显示、模糊背景图片、点击事件
一.定位问题按照视频写代码时,发现元素“5个“”定位不对,如下图 正常位置为 还以为是哪里写错了,仔细研究了下,需要在父div上加relative. position:relative/absolut ...
- VUE2.0 饿了吗视频学习笔记(二):新版本添加路由和显示Header
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 webpack.dev.conf.js中添加两段代码 'use strict' cons ...
- VUE2.0 饿了吗视频学习笔记(一):VUE示例data.json
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...
- VUE2.0 饿了吗视频学习笔记(三):VUE2.0取消了v-link
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 写法如下 <div class="tab-item"> ...
- vue2.0 饿了么项目学习总结
最近在GitHub上发现一个基于vue2.0的饿了么项目.本着互联网的分享精神,现在将我自己所理解的,所总结的经验分享给大家.本篇文字我将从学习的角度向大家分享. 在学习本项目之前我已经将vue2.0 ...
- AntDesign vue学习笔记(六)Table 显示图片
AntDeign官网上没有table动态绑定显示图片的示例,baidu上搜索出来的大部分都是React语法,无法使用. 经过摸索,实现方法如下:以显示一个图片,一个按钮为例(picurl是返回的jso ...
- Asp.net core 2.0.1 Razor 的使用学习笔记(五)
按说这里应该写关于Role角色类的笔记,但是我还没时间实验这块,所以等以后我搞定了再来分享.现在先写其他部分. Asp.net core 2.0.1 Razor 的使用学习笔记——建立模型 按照微软官 ...
随机推荐
- [转帖]ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解
ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解 https://www.cnblogs.com/vipyoumay/p/7525478.html ASP.NET C ...
- mysql数据库优化大全
转载:https://blog.csdn.net/weixin_38112233/article/details/79054661 数据库优化 sql语句优化 索引优化 加缓存 读写分离 分区 分布式 ...
- 无需破解:Windows Server 2008 R2 至少免费使用 900天
无需破解:Windows Server 2008 R2 至少免费使用 900天 2009年10月30日 星期五 02:10 1.首先安装后,有一个180天的试用期. 2.在180天试用期即将结束时,使 ...
- 什么样的 GitHub 才适合放简历上?
为什么 GitHub 可以加分? 很多招聘描述上面都会备注 GitHub 是加分项,那么为什么它是加分项呢? 停,如果看到这里你还不知道 GitHub 是什么,可以看一下 Phodal的手记:http ...
- Check failed: status == CUBLAS_STATUS_SUCCESS (11 vs. 0) CUBLAS_STATUS_MAPPING_ERROR
I0930 21:23:15.115576 30918 solver.cpp:281] Learning Rate Policy: multistepF0930 21:23:17.263314 310 ...
- Uva10474-STL水题-白书
白书的一道水题.话说好久没认真做难题了.今天出了排名,所有队伍里倒数第一啊! 代码没什么可说的了. #include <algorithm> #include <cstring> ...
- AOP 获取 RequestContextHolder
转载: http://blog.csdn.net/lexang1/article/details/52619215 在使用spring时,经常需要在普通类中获取session,request等对像. ...
- day28 反射 属性操作 getattr hasattr setattr delattr
反射 用字符串来对应其同名的属性或者方法,通过某种方法调用这个字符串来执行方法或者获取属性 网络编程的时候非常好用,是很重要的内容 先看个示例吧: class Teather: dic = { &qu ...
- 【BZOJ2001】[HNOI2010]城市建设(CDQ分治,线段树分治)
[BZOJ2001][HNOI2010]城市建设(CDQ分治,线段树分治) 题面 BZOJ 洛谷 题解 好神仙啊这题.原来想做一直不会做(然而YCB神仙早就切了),今天来怒写一发. 很明显这个玩意换种 ...
- [hgoi#2019/3/3]赛后总结
T1--最长公共前缀(lcp) 定义两个字符串S,T 的最长公共前缀lcp(S,T)为最长的字符串R,满足R 既是S 的前缀又是T 的前缀. 给定一个字符串S,下标从1 开始,每次询问给出四个正整数a ...