v-for盒子横向布局

v-for是Vue.js框架中的一个指令，它可以用来渲染列表数据。横向布局则可以通过CSS中的flexbox布局实现，具体实现方法如下：

1.在父元素中设置display: flex;即可开启flexbox布局。

2.通过flex-direction属性设置主轴方向为水平方向。

3.通过设置子元素的flex属性来确定子元素在主轴上的大小比例，即可实现横向布局。

下面是一个v-for盒子横向布局的示例代码：

<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index" class="box">{{item}}</div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: row;
}

.box {
  flex: 1;
  height: 100px;
  background-color: #ccc;
  margin-right: 10px;
}
</style>