懒惰的数独——lodash的shuffle方法实现随机打乱的效果

1.效果

2.代码

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
</head>
<body>
<div id="app">
    <h1>数独</h1>
    <p>继续[按下]随机按钮直到你获胜</p>

    <button @click="shuffle" style="background-color: chocolate">
        随机改变
    </button>
    <transition-group name="cell" tag="div" class="container">
        <div v-for="cell in cells" :key="cell.id" class="cell">
            {{ cell.number }}
        </div>
    </transition-group>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            cells: Array.apply(null, { length: 81 })
                .map((_, index) => {
                    return {
                        id: index,
                        number: index % 9 + 1
                    }
                })
        },
        methods: {
            shuffle () {
                this.cells = _.shuffle(this.cells)
            }
        }
    })
</script>
<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        width: 238px;
        margin-top: 10px;
        background-color: coral;
    }
    .cell {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 25px;
        height: 25px;
        border: 1px solid #47a8d0;
        margin-right: -1px;
        margin-bottom: -1px;
    }
    .cell:nth-child(3n) {
        margin-right: 0;
    }
    .cell:nth-child(27n) {
        margin-bottom: 0;
    }
    .cell-move {
        transition: transform 1s;
    }
</style>
</body>
</html>

利用transition-group和lodash的shuffle方法实现打乱功能

其他代码------小试牛刀的增添数据列表​​​​​​​

相关推荐
li35745 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj5 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
萌萌哒草头将军9 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
Zz_waiting.12 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者13 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者13 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_4569042713 小时前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu13 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
鱼钓猫13 小时前
H5 电子签名组件
vue.js·canvas
就是帅我不改15 小时前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端