Vue 中实现一行显示两个 div：8 个 div 分成 4 行

在 Vue 中，可以使用 CSS 样式来实现 div 一行显示两个的效果。可以通过以下步骤实现：\n\n1. 在组件的样式中，为每个 div 元素设置宽度和高度，以及 margin 间距，以适应一行显示两个的布局。例如：\n\ncss\n.div-item {\n width: 50%;\n height: 100px;\n margin: 10px;\n}\n\n\n2. 在组件的模板中，使用循环指令（如 v-for）来生成 8 个 div 元素，并为每个 div 元素添加一个 class，以应用上述样式。例如：\n\nhtml\n<template>\n <div class="container">\n <div v-for="item in items" :key="item.id" class="div-item">{{ item.text }}</div>\n </div>\n</template>\n\n\n3. 在组件的逻辑代码中，定义 items 数组，并初始化 8 个对象，用于生成 8 个 div 元素。例如：\n\njavascript\nexport default {\n data() {\n return {\n items: [\n { id: 1, text: 'item 1' },\n { id: 2, text: 'item 2' },\n { id: 3, text: 'item 3' },\n { id: 4, text: 'item 4' },\n { id: 5, text: 'item 5' },\n { id: 6, text: 'item 6' },\n { id: 7, text: 'item 7' },\n { id: 8, text: 'item 8' }\n ]\n };\n }\n};\n\n\n这样，就能实现一行显示两个 div 的效果，并且一共显示 4 行。