安装lodash库
cnpm install lodash -S
安装lodash-type
cnpm install @types/lodash -D
- <div>
- <button @click="random">randombutton>
- <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>
-
- <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>