我有一个 API,每次发送请求时都会返回 9 个图像 URL。我想以 3x3 网格显示响应图像,但我很困惑如何去做。我所能做的就是使用 v-for 水平或垂直循环图像显示组件。请帮帮我。
答案 0 :(得分:2)
您可以使用 CSS grid layout,请务必检查浏览器支持。
我们需要使用 display: grid 和 grid-template-columns 使容器成为网格容器。
您可以创建一个接受数字属性的组件,然后在 repeat() 表示法中使用它。
重复({numberOfColumns}, minmax({minColumnSize}, {maxColumnSize}))
new Vue({
el: "#app",
data() {
return {
cards: [1, 2, 3, 4, 5, 6, 7, 8, 9],
numberOfColumns: 9,
}
},
computed: {
gridStyle() {
return {
gridTemplateColumns: `repeat(${this.numberOfColumns}, minmax(100px, 1fr))`
}
},
},
methods: {
addCard() {
this.cards.push('new-card')
},
},
})
Vue.config.productionTip = false;
Vue.config.devtools = false;
.card-list {
display: grid;
grid-gap: 1em;
}
.card-item {
background-color: dodgerblue;
padding: 2em;
}
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
ul {
list-style-type: none;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
Columns: <input v-model.number="numberOfColumns">
<ul :style="gridStyle" class="card-list">
<li v-for="(card, index) in cards" class="card-item">
{{ index + 1 }}
</li>
</ul>
<button @click="addCard">
Add card
</button>
</div>