五个小div盒子 在一个大div盒子里 按顺序排好 不乱跑 用vue2技术怎么写

您可以使用Vue2中的v-for指令和flex布局来实现这个效果。具体步骤如下：

1. 在Vue组件中定义一个数组，里面包含五个对象，每个对象代表一个小div盒子，对象中包含一个id和一个text属性。

2. 在组件的template中，使用v-for指令遍历这个数组，生成五个小div盒子，并将它们按照顺序排列。

3. 在大div盒子的样式中，设置display:flex，使得小div盒子按照顺序排列，并不会乱跑。

下面是示例代码：

<template>
  <div class="container">
    <div class="box" v-for="item in items" :key="item.id">{{ item.text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '小盒子1' },
        { id: 2, text: '小盒子2' },
        { id: 3, text: '小盒子3' },
        { id: 4, text: '小盒子4' },
        { id: 5, text: '小盒子5' },
      ],
    };
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-between;
}

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

在上面的代码中，我们使用了flex布局，并设置了justify-content属性为space-between，这样五个小div盒子就会按照顺序排列，并且之间会有10px的间隔。