vue v-for展示元素分两栏 中心使用分割线

1.结果展示:

2.代码展示:

1. <template>
2.   <div class="container">
3.     <div class="column" v-for="(item, index) in items" :key="index">
4.       <div class="item">{{ item }}</div>
5.       <div v-if="index % 2 !== 0" class="divider"></div>
6.     </div>
7.   </div>
8. </template>
10. <script>
11. export default {
12.   data() {
13.     return {
14.       items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
15.     };
16.   }
17. };
18. </script>
20. <style scoped>
21. .container {
22.   display: flex;
23.   flex-wrap: wrap;
25. }
27. .column {
28.   flex: 0 0 50%; /* 每个元素占据50%的宽度 */
29.   max-width: 50%;
30.   padding: 10px;
31.   box-sizing: border-box;
32.   position: relative;
33. }
35. .item {
36.   background-color: #f0f0f0;
37.   padding: 20px;
38.   margin-bottom: 10px;
39. }
41. .divider {
42.   position: absolute;
43.   top: 0;
44.   bottom: 0;
45.   width: 1px; /* 分割线的宽度 */
46.   background-color: #ccc; /* 分割线的颜色 */
47.   margin-left: -10px;
48. }
49. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。