Vue.js - v-for 水平显示图像（5 行）

【问题标题】：Vue.js - v-for to display images horizontally (5 by row)Vue.js - v-for 水平显示图像（5 行）
【发布时间】：2021-02-20 03:55:24
【问题描述】：

我需要从服务中获取图像并且需要水平显示。假设有 10 张图像。然后我需要在第一行显示前五张图像，在第二行显示接下来的五张图像。我尝试如下。

<div style="margin-top: 5px;width: 100%;">
 <div style="display: flex">
    <ul v-for="(item,index) in body_content">
        <li style="width: 20%;display: inline">
          <img v-bind:src="item.title">
        </li>
        <br v-if="index > 6">
    </ul>
 </div>                                                                                
</div>

但它不能正常工作。如果有人知道方法，请告诉我。

【问题讨论】：

标签： html css vue.js vuejs2 vue-component

【解决方案1】：

您可以使用 display:grid 和 grid-template-columns:repeat(5,1fr) 属性，例如：

<div style="margin-top: 5px;width: 100%;">

    <ul  style="display: grid;grid-template-columns:repeat(5,1fr);">
        <li v-for="(item,index) in body_content" style="width: 20%;display: inline" >
          <img v-bind:src="item.title">
        </li>
    </ul>
                                                                              
</div>

建议迭代 li 而不是 ul 并使用类名来分隔样式并使模板更干净。

【讨论】：