如何使用for循环添加新行？
我有一个简单的字母数组 我使用 for 循环在屏幕上显示字母 我想每六个字母添加到一个新行 我想达到这个结果
<script>
export default {
data() {
return {
alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
}
}
}
</script>
<template>
<ul>
<li v-for="(item, index) in alphabet" :key="index">
{{ item }}
</li>
</ul>
</template>
回答
我将通过在网格中显示此数组和按钮来使用简单的 css。
<div class="table">
<div class="table__item" v-for="(item, index) in alphabet" :key="index">
{{ item }}
</div>
<div class="table__button">button</div>
</div>
.table {
display: grid;
grid-template-columns: repeat(6, 20px);
grid-template-rows: repeat(6, 20px);
}
.table__item {
display: flex;
align-items: center;
justify-content: center;
}
.table__button {
grid-column: 4 / 6;
grid-row: 5;
background: red;
}