当前位置：首页 > VUE

用vue实现随机分组

2026-01-21 02:54:42VUE

使用 Vue 实现随机分组

数据准备

定义一个数组存储待分组的成员名单，并设置分组数量和每组人数。例如：

data() {
  return {
    members: ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'],
    groupCount: 2,
    shuffledMembers: [],
    groups: {}
  }
}

随机打乱数组

使用 Fisher-Yates 算法对成员数组进行随机排序：

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

分组逻辑实现

根据设定的分组数量将打乱后的成员分配到各组：

groupMembers() {
  this.shuffledMembers = this.shuffleArray([...this.members]);
  this.groups = {};

  const membersPerGroup = Math.ceil(this.shuffledMembers.length / this.groupCount);

  for (let i = 0; i < this.groupCount; i++) {
    this.groups[`组${i + 1}`] = this.shuffledMembers.slice(
      i * membersPerGroup,
      (i + 1) * membersPerGroup
    );
  }
}

模板渲染

在模板中显示分组结果：

<template>
  <div>
    <button @click="groupMembers">随机分组</button>
    <div v-for="(group, name) in groups" :key="name">
      <h3>{{ name }}</h3>
      <ul>
        <li v-for="member in group" :key="member">{{ member }}</li>
      </ul>
    </div>
  </div>
</template>

动态分组设置

添加输入框让用户可以自定义分组数量和成员名单：

data() {
  return {
    newMember: '',
    customGroupCount: 2
  }
},
methods: {
  addMember() {
    if (this.newMember && !this.members.includes(this.newMember)) {
      this.members.push(this.newMember);
      this.newMember = '';
    }
  }
}

完整组件示例

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

<template>
  <div>
    <div>
      <input v-model="newMember" @keyup.enter="addMember" placeholder="添加成员">
      <button @click="addMember">添加</button>
    </div>
    <div>
      分组数量: <input type="number" v-model.number="customGroupCount" min="1">
    </div>
    <button @click="groupMembers">随机分组</button>

    <div v-for="(group, name) in groups" :key="name" class="group">
      <h3>{{ name }}</h3>
      <ul>
        <li v-for="member in group" :key="member">{{ member }}</li>
      </ul>
    </div>
  </div>
</template>

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

      const membersPerGroup = Math.ceil(this.shuffledMembers.length / this.groupCount);

      for (let i = 0; i < this.groupCount; i++) {
        this.groups[`组${i + 1}`] = this.shuffledMembers.slice(
          i * membersPerGroup,
          (i + 1) * membersPerGroup
        );
      }
    },
    addMember() {
      if (this.newMember && !this.members.includes(this.newMember)) {
        this.members.push(this.newMember);
        this.newMember = '';
      }
    }
  }
}
</script>

<style>
.group {
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

这个实现提供了完整的随机分组功能，包括成员管理、分组数量设置和结果展示。点击"随机分组"按钮会立即生成新的随机分组结果。

用vue实现随机分组