vue两个div怎么在上下排列显示

你可以使用`flex布局`或者`grid布局`来实现两个div在上下排列显示。

使用`flex布局`，可以将父元素设置为`display:flex;`，然后设置`flex-direction: column;`，即可让子元素在纵向上排列。例如：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.box1 {
  background-color: red;
  height: 100px;
}

.box2 {
  background-color: blue;
  height: 100px;
}

使用`grid布局`，可以将父元素设置为`display: grid;`，然后设置`grid-template-rows: auto auto;`，即可让子元素在纵向上排列。例如：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

.container {
  display: grid;
  grid-template-rows: auto auto;
}

.box1 {
  background-color: red;
  height: 100px;
}

.box2 {
  background-color: blue;
  height: 100px;
}