vue中让一个div中的button依次排列，写个案例

可以使用 Vue 中的 `v-for` 指令和 CSS 中的 `flexbox` 布局来让一个 `div` 中的 `button` 元素依次排列。以下是一个简单的案例：

<template>
  <div class="button-group">
    <button v-for="(button, index) in buttons" :key="index">{{ button }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: ['Button 1', 'Button 2', 'Button 3']
    };
  }
};
</script>

<style>
.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

在上面的案例中，我们使用 `v-for` 指令来遍历 `buttons` 数组，并在每次循环中渲染一个 `button` 元素。每个 `button` 元素的 `key` 属性设置为当前索引 `index`，以确保每个 `button` 元素都是唯一的。

然后，我们使用 CSS 中的 `flexbox` 布局，将 `div` 的 `display` 属性设置为 `flex`，并将 `flex-direction` 属性设置为 `column`，以使 `button` 元素在垂直方向上排列。最后，使用 `align-items: center` 属性将 `button` 元素在垂直方向上居中对齐。