当前位置：首页 > VUE

vue实现随机分组功能

2026-01-22 04:33:07VUE

实现随机分组功能的方法

在Vue中实现随机分组功能可以通过以下步骤完成。这里假设需要将一组人员随机分成若干小组，每组人数可能固定或不固定。

准备数据

定义一个数组存储待分组的人员名单，并设置每组的人数或组数。

data() {
  return {
    people: ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'],
    groupSize: 2, // 每组2人
    groups: []
  }
}

随机打乱数组

使用Fisher-Yates洗牌算法对数组进行随机排序。

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

分组逻辑

根据打乱后的数组创建分组。

methods: {
  createGroups() {
    const shuffled = this.shuffleArray(this.people)
    this.groups = []

    for (let i = 0; i < shuffled.length; i += this.groupSize) {
      this.groups.push(shuffled.slice(i, i + this.groupSize))
    }
  }
}

固定组数而非每组人数

如果需要指定组数而非每组人数，可以这样修改：

methods: {
  createGroupsByNumber(numGroups) {
    const shuffled = this.shuffleArray(this.people)
    this.groups = Array(numGroups).fill().map(() => [])

    shuffled.forEach((person, index) => {
      const groupIndex = index % numGroups
      this.groups[groupIndex].push(person)
    })
  }
}

模板展示

在模板中展示分组结果。

<template>
  <div>
    <button @click="createGroups">随机分组</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>

完整组件示例

将上述代码整合成一个完整的Vue组件。

vue实现随机分组功能

<template>
  <div>
    <div>
      <label>每组人数：</label>
      <input type="number" v-model.number="groupSize" min="1" :max="people.length">
      <button @click="createGroups">随机分组</button>
    </div>
    <div v-for="(group, index) in groups" :key="index">
      <h3>第 {{ index + 1 }} 组 ({{ group.length }}人)</h3>
      <ul>
        <li v-for="person in group" :key="person">{{ person }}</li>
      </ul>
    </div>
  </div>
</template>

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

      for (let i = 0; i < shuffled.length; i += this.groupSize) {
        this.groups.push(shuffled.slice(i, i + this.groupSize))
      }
    }
  }
}
</script>