vue生成随机列表

要生成随机列表，你可以使用Vue.js框架提供的v-for指令和计算属性来实现。

首先，在Vue实例中定义一个数组，用于存储随机列表的数据。然后，通过计算属性生成一个随机的数组，将其绑定到v-for指令上，即可在页面中渲染出随机列表。

下面是一个示例代码，可以参考一下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in randomList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Apple', 'Banana', 'Orange', 'Pear', 'Grape', 'Pineapple', 'Watermelon', 'Mango'],
    };
  },
  computed: {
    randomList() {
      return this.shuffleArray(this.list);
    },
  },
  methods: {
    shuffleArray(arr) {
      let i = arr.length;
      while (i > 0) {
        const j = Math.floor(Math.random() * i);
        const temp = arr[i - 1];
        arr[i - 1] = arr[j];
        arr[j] = temp;
        i--;
      }
      return arr;
    },
  },
};
</script>

在这个示例代码中，我们通过shuffleArray方法来生成随机数组。这个方法将数组中的元素打乱顺序，并返回打乱后的数组。然后，我们将这个随机数组绑定到v-for指令上，通过循环渲染出随机列表。

需要注意的是，为了避免重复元素，我们需要在生成随机数组时对原数组进行复制。另外，我们还需要在v-for指令中加上:key属性，来提高渲染效率。