vue2页面渲染 两个数据一行 怎么渲染

let  data=[“办公电脑”,“办公纸品”,“个护用品”,“销毁设备”,“桌面文具”,]

在 Vue 2 中，你可以使用 ​v-for​ 指令来遍历数据数组，并使用 CSS 来控制每行显示两个数据项。以下是一个简单的示例，展示了如何在 Vue 2 中实现这个需求：

1. HTML 模板部分：

<template>

<div class="container">

<div class="row" v-for="(item, index) in chunkedData" :key="index">

<div class="col" v-for="subItem in item" :key="subItem">

{{ subItem }}

</div>

</div>

</div>

</template> ​

1. Vue 组件部分：

<script>

export default {

data() {

return {

data: ["办公电脑", "办公纸品", "个护用品", "销毁设备", "桌面文具"]

};

},

computed: {

chunkedData() {

const chunked = [];

for (let i = 0; i < this.data.length; i += 2) {

chunked.push(this.data.slice(i, i + 2));

}

return chunked;

}

}

};

</script> ​

1. CSS 部分：

<style>

.container {

display: flex;

flex-direction: column;

align-items: center;

}

.row {

display: flex;

justify-content: center;

width: 100%;

margin-bottom: 10px;

}

.col {

flex: 1;

padding: 10px;

border: 1px solid #ccc;

text-align: center;

}

</style> ​

解释

1. HTML 模板部分：

   • 使用 ​v-for​ 指令遍历 ​chunkedData​，这是通过计算属性 ​chunkedData​ 生成的二维数组。
   • 每个 ​row​ 包含两个 ​col​，每个 ​col​ 显示一个数据项。

2. Vue 组件部分：

   • ​​data​ 方法返回原始数据数组。
   • ​​computed​ 中的 ​chunkedData​ 方法将原始数据数组分割成每两个元素一组的二维数组。

3. CSS 部分：

   • ​​container​ 使用 Flexbox 布局，确保内容居中。
   • ​​row​ 也使用 Flexbox 布局，确保每行中的两个 ​col​ 并排显示。
   • ​​col​ 设置了一些基本样式，如边框和内边距，以便更好地显示内容。

这样，你就可以在 Vue 2 中实现每行显示两个数据项的效果。