http://runjs.cn/detail/e5qwzclz <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 找字游戏</title> <style type="text/css"> 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> </body> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> <script type="text/javascript"> new Vue({ el: "#vue-test", data: { table: [], textMap: ['狐', '孤'], level: 1 }, computed: { levelText: function(){ return this.level >10 ? this.level : "一二三四五六七八九十".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> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » vue 找字游戏 喜欢 (0)or分享 (0)
