vue实现长图垂直居上 vue实现短图垂直居中

深入理解Vue弹性布局，轻松实现长图垂直居上和短图垂直居中

你是否曾经遇到过网页布局中的图片展示问题，特别是当图片尺寸不一，需要实现垂直方向上的特定布局时？今天，我们将通过Vue弹性布局来解决这个问题，让你的长图和短图都能完美展示。

我们先来了解一下大致的效果。想象一下，你的网页上有一系列图片，长图可以通过滚动条查看，短图则居中展示，布局合理且美观。接下来，我们一步步实现这个效果。

在HTML部分（Vue作用域内），我们可以使用v-for指令来循环渲染图片：

```html

```

在CSS部分，我们需要设置box的高度、溢出方式、弹性布局等相关属性。对于长图，我们需要调整其内容的对齐方式：

```css

.box {

height: 100%; / 如高度等于网页高度 /

overflow: auto;

display: flex;

flex-direction: column;

justify-content: space-around; / 默认情况 /

}

.swiper-slide.long {

justify-content: flex-start; / 长图对齐方式 /

}

```

至于JavaScript部分（Vue作用域内，使用jQuery），我们需要监听图片的加载事件，判断图片的高度，然后给对应的父元素添加或移除“long”类：

```javascript

methods: {

checkHeight: function(event) {

var el = $(event.currentTarget);

el.parent().removeClass('long'); // 默认移除长图类

// this.CH 为网页高度或容器高度

if (el.height() > this.CH) { // 判断图片高度是否超过容器高度

el.parent().addClass('long'); // 如果是长图，则添加长图类

}

}

}

```

以上就是实现Vue弹性布局，使长图垂直居上，短图垂直居中的全部内容。希望这篇文章能对你的学习有所帮助，也希望大家多多支持我们的博客。如果你有任何疑问或建议，欢迎在评论区留言，我们会尽快回复。也请大家关注我们的其他文章，更多精彩内容等待你的发现。狼蚁SEO将持续为你提供有价值的分享，让我们一起学习，一起进步！