vue图片排版

Vue是一种普遍的前端JavaScript结构，它可以轻易地完成页面模块，其中的图像排列也很方便。下面给大家说明一下应用Vue完成图像排列的方式。

<template>
<div class="img-container">
<div v-for="img in images" class="img-wrapper">
<img :src="img.src" :alt="img.name">
<div class="img-name">{ { img.name } }</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ src: 'example1.jpg', name: 'Example 1' },
{ src: 'example2.jpg', name: 'Example 2' },
{ src: 'example3.jpg', name: 'Example 3' },
{ src: 'example4.jpg', name: 'Example 4' },
{ src: 'example5.jpg', name: 'Example 5' }
]
}
}
};
</script>
<style>
.img-container {
display: flex;
flex-wrap: wrap;
}
.img-wrapper {
flex-basis: calc(20% - 20px);
margin: 10px;
text-align: center;
}
.img-wrapper img {
width: 100%;
height: auto;
}
.img-name {
margin-top: 10px;
font-size: 14px;
font-weight: bold;
}
</style>

上面是一个示例代码，对应的页面是一个包含5张图像和图像名字的模块。其中，模板部分应用了Vue的v-for指令来实时生成图像，style部分应用了Flexbox来完成图像的排列。

通过以上代码，我们可以发现，Vue的图像排列非常简洁和容易拓展。将图像保存在模块的资料中，然后应用v-for循环，就可以轻易地在页面上实时展现图像。在风格部分，应用Flexbox可以完成灵活强大的排列效果。在实际应用中，可以根据具体需求对风格代码进行改动，完成更多元化的图像排列效果。