我有一个使用 v-for 渲染的列表，我将数据输出到一列中。有没有办法在达到一定的宽度和高度后，数据流入下一列而不创建任何新的数组？这里有一个demo https://codepen.io/treehuggerrick/pen/bGGOQBz.
new Vue({
el: '#app',
data() {
return {
lists: [{
text: 'Item1'
},
{
text: 'Item2'
},
{
text: 'Item3'
},
{
text: 'Item4'
},
{
text: 'Item5'
},
{
text: 'Item6'
},
{
text: 'Item7'
},
{
text: 'Item8'
},
{
text: 'Item9'
},
]
}
}
})
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-layout class="mt-3 ml-4">
<v-flex md-4>
<div v-for="list in lists" :key="list.text">
{{list.text}}
</div>
</v-flex>
<v-flex md4>
//After a certain width and height, make data flow into this column?
</v-flex>
</v-layout>
</v-app>
</div>
我更喜欢使用宽度和高度，而不是创建一个新数组，这样我就不必在整个代码中进行大量手动调整来处理新数组。
您可以使用 CSS 轻松创建列。只需使用一个v-for获取屏幕上的内容，然后使用 CSS 对其进行样式设置。在你的情况下，循环将附加多个<div>元素。下面是 CSS 列的示例。
这是最基本的解决方案column-count: 3将列表分成 3 个相等的列。
.column_wrapper {
column-count: 3;
}
<div class="column_wrapper">
<!-- results of <div v-for="item in list"></div> -->
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
<div>Item 11</div>
<div>Item 12</div>
<div>Item 13</div>
<div>Item 14</div>
<div>Item 15</div>
</div>
此解决方案的缺点是浏览器总是尝试将列表分成 3 列。如果您只想在特定高度后拆分列，则可以使用flex-box
例如（如果列表长度超过 200 像素高度）
.column_wrapper {
max-height: 200px;
display: flex;
flex-flow: column wrap;
}
<div class="column_wrapper">
<!-- results of <div v-for="item in list"></div> -->
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
<div>Item 11</div>
<div>Item 12</div>
<div>Item 13</div>
<div>Item 14</div>
<div>Item 15</div>
</div>
Note:在两个例子中它分裂的位置是任意的（就像浏览器决定何时移动到下一列一样）。如果您需要决定它在哪里中断，那么为 vue 中的每一列创建一个新数组是您最好的选择。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
