vue中让一个div中的button，从同一行开始依次排列，指定一行放三个，如果放不下了放到下一行，如果点击按钮，按钮会长亮，再次点击恢复，写个案例

在 Vue 中，可以使用 Flex 布局来实现让一个 div 中的 button 按指定的行数排列，如果放不下了放到下一行的效果。同时，可以通过绑定按钮的样式来实现按钮的长亮和恢复。下面是一个示例代码，演示如何实现这个功能：

<template>
  <div class="container">
    <button
      v-for="(button, index) in buttons"
      :key="index"
      :class="{ active: button.isActive }"
      @click="toggleActive(button)"
    >
      {{ button.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { label: "Button 1", isActive: false },
        { label: "Button 2", isActive: false },
        { label: "Button 3", isActive: false },
        { label: "Button 4", isActive: false },
        { label: "Button 5", isActive: false },
        { label: "Button 6", isActive: false },
        { label: "Button 7", isActive: false },
        { label: "Button 8", isActive: false },
        { label: "Button 9", isActive: false },
      ],
    };
  },
  methods: {
    toggleActive(button) {
      button.isActive = !button.isActive;
    },
  },
};
</script>

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

button {
  margin: 5px;
  padding: 10px;
  width: calc(33.33% - 10px);
}

.active {
  background-color: yellow;
}
</style>

在上面的代码中，首先使用了 Flex 布局来实现按钮的排列。通过将容器的 `flex-wrap` 属性设置为 `wrap`，可以让按钮自动换行。通过将容器的 `justify-content` 属性设置为 `space-between`，可以让按钮之间的间距自动调整。

同时，为了实现点击按钮时按钮的长亮和恢复效果，给每个按钮绑定了一个 `isActive` 属性，并根据这个属性动态绑定了按钮的 `active` 类。当点击按钮时，通过调用 `toggleActive` 方法来切换按钮的 `isActive` 属性的值，从而实现按钮的长亮和恢复效果。