VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table
一、star组件使用到了computed属性
computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算。
computed: {
starType() {
return 'star-' + this.size
},
<template>
<div class="star" :class="starType">
<span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" key="index"></span>
</div>
</template>
template可以直接绑定startType
使用star组件必须先注册,再使用。
二、Elements in iteration expect to have 'v-bind:key'错误
1、<span v-for="itemClass in itemClasses" :key="itemClass.index" :class="itemClass" class="star-item">,加红色部分可以解决 2、或者将"vetur.validation.template": true, 改成"vetur.validation.template": false, 即可
三、使用方法
<div class="star-wrapper">
<star :size="48" :score="seller.score"></star>
</div>
运行效果
四、flex布局
.title
display: flex
width: 80%
margin: 28px auto 24px auto
.line
flex: 1
position: relative
top: -6px
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
.text
padding: 0 12px
font-weight: 700
font-size: 14px
父容器div设置flex,line自动布局,text随内容宽度自动变化,如下图所示
flex: 参数1-是否等分,参数2-是否缩放,参数3-内容不足占位宽度
五、display:table解决了一部分需要使用表格特性但又不需要表格语义的情况,尤其是DIV+CSS很不方便解决的问题
一、父元素宽度固定,想让若干个子元素平分宽度
转自:https://www.cnblogs.com/stephen666/p/6995388.html
七、发布项目
npm run build

VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table的更多相关文章
- VUE2.0 饿了吗视频学习笔记(四):颜色、跳转、设置、vue-resource
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 1.设置选中项颜色 <template> <div id=" ...
- 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 饿了吗视频学习笔记(五):父子对象传递、显示图片
一.父子组件之间对象传递 1.app.Vue中的v-header 中加入 v-bind:seller="seller" template> <div id=" ...
- VUE2.0 饿了吗视频学习笔记(三):VUE2.0取消了v-link
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 写法如下 <div class="tab-item"> ...
- vue2.0 饿了么项目学习总结
最近在GitHub上发现一个基于vue2.0的饿了么项目.本着互联网的分享精神,现在将我自己所理解的,所总结的经验分享给大家.本篇文字我将从学习的角度向大家分享. 在学习本项目之前我已经将vue2.0 ...
- Asp.net core 2.0.1 Razor 的使用学习笔记(五)
按说这里应该写关于Role角色类的笔记,但是我还没时间实验这块,所以等以后我搞定了再来分享.现在先写其他部分. Asp.net core 2.0.1 Razor 的使用学习笔记——建立模型 按照微软官 ...
- Asp.net core 2.0.1 Razor 的使用学习笔记(六)
Asp.net core 2.0.1 Razor 的使用学习笔记——基本页面的建立 VS这版(vs版本:15.5.6 .net版本:4.7.02558)的Razor页面自动生成就是坑爹货,它自动生成 ...
随机推荐
- SAP入行就业
就大局势来说, 缺乏人最多的模块有abap 还有就是FICO 和MM. 如果您 英语水平特别高的话,建议您学习FICO HR 或BW. 如果您想追求高薪,那就是FICO无疑了.想快速就业或者有编程基础 ...
- 关于适用base64对图片进行编码在服务器上性能的相关讨论
周五在写open api的时候 和
- python 抽象类与接口类
几个类 实现的方法都一致的话 就继承同一个父类 在父类写一个公共方法 给子类使用
- BZOJ4455 ZJOI2016小星星(容斥原理+树形dp)
相当于给树上的每个点分配一个编号使父亲和儿子间都有连边. 于是可以考虑树形dp:设f[i][j][k]为i号点的编号为j,其子树中编号集合为k的方案数.转移显然.然而复杂度3n·n3左右,具体我也不知 ...
- Dominator Tree & Lengauer-Tarjan Algorithm
问题描述 给出一张有向图,可能存在环,对于所有的i,求出从1号点到i点的所有路径上的必经点集合. 什么是支配树 两个简单的小性质—— 1.如果i是j的必经点,而j又是k的必经点,则i也是k的必经点. ...
- 【Luogu4512】多项式除法(FFT)
题面 洛谷 题解 模板题... 我直接蒯我写的东西... 这个除法是带余除法,所以并不能直接求逆解决. 要求的就是给定两个多项式\(A(x),B(x)\),其项数为\(n,m\) 求解一个\(n-m\ ...
- 洛谷P3233 世界树
题意:给定树上k个关键点,每个点属于离他最近,然后编号最小的关键点.求每个关键点管辖多少点. 解:虚树 + DP. 虚树不解释.主要是DP.用二元组存虚树上每个点的归属和距离.这一部分是二次扫描与换根 ...
- 由asp的一个错误,看语言的不同:asp & java
今天查看网页源代码,无意发现源代码尾部抛出asp的错误信息,但没有显示在网页上. 如果没查看源代码,还没发现asp运行代码出错了. 大致情况是这样,在asp中,有一个变量来表示用户当前使用的容量,注意 ...
- html5的data-*属性,我们一起认识下
html5的data-自定义属性出来很久了,我们一起认识一下. 比如如下一个代码,我们怎么取到对应的name,对应的age? 既然data-*自定义属性是它的一个属性,这个时候就可以用getAttri ...
- idea 显示properties 中文
有时我们打开.properties文件时,中文显示为utf8编码格式,可以在file->setting->editor->file encodings下 把transparent n ...