云迈博客

您现在的位置是:首页 > 前端技术 > 正文

前端技术

常用方法

彭静2021-12-01前端技术338
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 ))

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~