常用方法
1.让多行内容显示一行,多余的用…表示white-space:nowrapoverflow:hiddentext-overflow:ellipsis2.显示宽高相等的图片,宽度为屏幕
1.让多行内容显示一行,多余的用…表示
white-space : nowrap
overflow: hidden
text-overflow : ellipsis
2.显示宽高相等的图片,宽度为屏幕宽度,高度与宽度相等
<div class="image-header">
<img :src="food.image"/>
</div>
.image-header
position: relative
width:100%
height: 0
padding-top : 100%
img
position: absolute
left: 0
top: 0
width: 100%
height: 100%
重点是父元素的height设为0,padding-top设为100%
3.vue中组件间传值:非父子组件传值
主要通过事件总线传值,在根节点给 Vue 挂载一个空的 Vue 对象
Vue.prototype.bus = new Vue();
需要发送事件的组件里
this.bus.$emit("change", params)
接收事件的组件
this.bus.$on("change", (msg) => {
//do yourself work
})
es6过滤
var newarr = [
{ num: 1, val: 'ceshi', flag: 'aa' },
{ num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num===2 ))
相关文章
发表评论
评论列表
- 这篇文章还没有收到评论,赶紧来抢沙发吧~