安装lodash库
cnpm install lodash -S
安装lodash-type
cnpm install @types/lodash -D
<template><div><button @click="random">random</button><transition-group move-class="mmm" class="wraps" tag="div"><div class="items" :key="item.in" v-for="item in list">{{ item.number }}</div></transition-group></div>
</template><script setup lang="ts">
import { ref } from "vue";
import _ from "lodash";let list = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {return {in: index,number: (index % 9) + 1,};})
);const random = () => {list.value = _.shuffle(list.value);
}
</script><style scoped>
.wraps {display: flex;flex-wrap: wrap;width: calc(25px * 10 + 9px);
}
.items {height: 25px;width: 25px;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;
}
.mmm {transition: all 1s;
}
</style>
)
