当前位置：首页 > VUE

用vue实现随机分组

2026-02-21 18:27:14VUE

使用 Vue 实现随机分组

数据准备

定义一个数组存储待分组的人员名单，并在 Vue 的 data 中初始化分组结果数组。

data() {
  return {
    people: ['张三', '李四', '王五', '赵六', '钱七', '孙八'],
    groups: []
  }
}

随机分组函数

通过 Fisher-Yates 洗牌算法对数组进行随机排序，再按指定组数分割。

methods: {
  shuffleArray(array) {
    const shuffled = [...array]
    for (let i = shuffled.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1))
      ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
    }
    return shuffled
  },

  randomGroup(groupCount) {
    const shuffled = this.shuffleArray(this.people)
    this.groups = Array.from({ length: groupCount }, (_, i) => 
      shuffled.filter((_, index) => index % groupCount === i)
    )
  }
}

模板部分

添加分组按钮和结果显示区域，支持动态设置组数。

<template>
  <div>
    <input v-model.number="groupCount" type="number" min="1" :max="people.length" />
    <button @click="randomGroup(groupCount)">随机分组</button>

    <div v-for="(group, index) in groups" :key="index">
      <h3>第 {{ index + 1 }} 组</h3>
      <ul>
        <li v-for="person in group" :key="person">{{ person }}</li>
      </ul>
    </div>
  </div>
</template>

完整组件代码

整合所有部分形成完整组件，添加组数输入校验。

export default {
  data() {
    return {
      people: ['张三', '李四', '王五', '赵六', '钱七', '孙八'],
      groups: [],
      groupCount: 2
    }
  },
  methods: {
    shuffleArray(array) {
      const shuffled = [...array]
      for (let i = shuffled.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
      }
      return shuffled
    },

    randomGroup(count) {
      const validCount = Math.min(Math.max(1, count), this.people.length)
      const shuffled = this.shuffleArray(this.people)
      this.groups = Array.from({ length: validCount }, (_, i) => 
        shuffled.filter((_, index) => index % validCount === i)
      )
    }
  }
}