当前位置：首页 > VUE

vue选项乱序实现

2026-03-09 21:58:57VUE

实现 Vue 选项乱序的方法

使用 v-for 和 computed 属性

在 Vue 中可以通过计算属性对数组进行乱序处理，再通过 v-for 渲染乱序后的结果。

vue选项乱序实现

<template>
  <div>
    <div v-for="item in shuffledItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ]
    }
  },
  computed: {
    shuffledItems() {
      return [...this.items].sort(() => Math.random() - 0.5)
    }
  }
}
</script>

使用 Fisher-Yates 洗牌算法

如果需要更高效的乱序算法，可以使用经典的 Fisher-Yates 洗牌算法。

vue选项乱序实现

<template>
  <div>
    <div v-for="item in shuffledItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ]
    }
  },
  computed: {
    shuffledItems() {
      const array = [...this.items]
      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
    }
  }
}
</script>

使用 lodash 的 shuffle 方法

如果项目中已经引入了 lodash，可以直接使用其 shuffle 方法。

<template>
  <div>
    <div v-for="item in shuffledItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { shuffle } from 'lodash'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ]
    }
  },
  computed: {
    shuffledItems() {
      return shuffle(this.items)
    }
  }
}
</script>