懒惰的数独——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方法实现打乱功能

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

相关推荐
sunbyte39 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店2 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
别跟老夫聊头发2 小时前
vue缩放/放大时,实时更新/变换显示高度
vue.js
拾光拾趣录2 小时前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权2 小时前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598242 小时前
vue3源码解析:调度器
前端·vue.js
梦想CAD控件3 小时前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
bitbitDown3 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
markyankee1013 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js