前端开发 Vue.js找字游戏

web前端开发 面试题目 前端开发需要了解知识 前端属于软件开发吗

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <script src=”//cdn.bootcss.com/vue/2.1.10/vue.js”></script>
    <style>
        body {
            background: #ffffff;
        }
        h1 {
            text-align: center;
        }
        #vue-test {}
        #wrapper {
            display: flex;
            justify-content: center;
        }
        table {
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 8px;
        }
        td {
            background: #5bba6e;
            color: #fff;
            font-size: 25px;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id=”vue-test”>
        <h1>
            第{{ levelText }}关
        </h1>
        <div id=”wrapper”>
            <table>
                <tr v-for=”row in table”>
                    <td v-for=”v in row” @click=”choose(v)”>{{ textMap[v] }}</td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        new Vue({
            el: “#vue-test”,
            data: {
                table: [],
                textMap: [‘科’, ‘抖’],
                level: 1
            },
            computed: {
                levelText: function () {
                    return this.level > 10 ? this.level : “12345678910”.split(”)[this.level – 1]
                }
            },
            methods: {
                choose: function (v) {
                    if (v) {
                        this.level++
                        this.generateTable()
                    }
                },
                generateTable: function () {
                    var size = this.level + 1
                    var table = new Array(size).fill(0).map(function () {
                        return new Array(size).fill(0)
                    })
                    var random = Math.random() * size * size | 0
                    var row = random / size | 0
                    var col = random – row * size
                    table[row][col] = 1
                    this.table = table
                }
            },
            created: function () {
                this.generateTable()
            }
        })
    </script>
</body>
</html>

前端开发做笔记的软件 前端小游戏开发需要的技术 js前端开发 需要

» 本文来自:前端开发者 » 《前端开发 Vue.js找字游戏》
» 本文链接地址:https://www.rokub.com/5373.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!