{"id":2459,"date":"2017-06-04T17:31:36","date_gmt":"2017-06-04T09:31:36","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2459"},"modified":"2017-06-04T17:31:37","modified_gmt":"2017-06-04T09:31:37","slug":"vue-%e6%89%be%e4%b8%8d%e5%90%8c%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2459","title":{"rendered":"vue-\u627e\u4e0d\u540c\u6e38\u620f"},"content":{"rendered":"

\u4e4b\u524d\u53d1\u5e03\u8fc7\u4e00\u7bc7\uff0c\u5728\u539f\u6765\u7684\u57fa\u7840\u4e0a\u589e\u52a0\u4e86\u5012\u8ba1\u65f6\u529f\u80fd\u3002<\/p>\n

<script src=\"\/\/cdn.bootcss.com\/vue\/2.1.10\/vue.js\"><\/script>\r\n<style>\r\n\t\t\tbody {\r\n\t\t\t\tbackground: #ffffff;\r\n\t\t\t\ttext-align: center;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\th1 {\r\n\t\t\t\ttext-align: center;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t\r\n\t\t\ttable {\r\n\t\t\t\tborder: 1px solid #ccc;\r\n\t\t\t\tpadding: 10px;\r\n\t\t\t\tborder-radius: 8px;\r\n\t\t\t\tmargin: 0 auto;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\ttd {\r\n\t\t\t\tbackground: #5bba6e;\r\n\t\t\t\tcolor: #fff;\r\n\t\t\t\tfont-size: 25px;\r\n\t\t\t\twidth: 40px;\r\n\t\t\t\theight: 40px;\r\n\t\t\t\tborder-radius: 4px;\r\n\t\t\t\tvertical-align: middle;\r\n\t\t\t\ttext-align: center;\r\n\t\t\t}\r\n\t\t<\/style>\r\n\t\t<div id=\"wrapper\">\r\n\t\t\t<h1 v-show=\"!over\">\u7b2c{{level-1}}\u5173&nbsp;&nbsp;\u5269\u4f59\u65f6\u95f4\uff1a{{lastTime}}<\/h1>\r\n\t\t\t<table v-show=\"!over\">\r\n\t\t\t\t<tr v-for=\"items in tabelData\">\r\n\t\t\t\t\t<td v-for=\"item in items\" @click=\"next(item)\">{{txt[item]}}<\/td>\r\n\t\t\t\t<\/tr>\r\n\t\t\t<\/table>\r\n\t\t\t<h1 v-show=\"over\">\u606d\u559c\u4f60\u95ef\u8fc7{{level-2}}\u5173\uff01<\/h1>\r\n\t\t<\/div>\r\n\t\t<script>\r\n\t\tvar vm = new Vue({\r\n\t\t\tel:\"#wrapper\",\r\n\t\t\tdata:{\r\n\t\t\t\tlevel:1,\r\n\t\t\t\ttabelData:[],\r\n\t\t\t\ttxt:[\"\u5df3\",\"\u5df1\"],\r\n\t\t\t\tlastTime:60,\r\n\t\t\t\tover:false\r\n\t\t\t},\r\n\t\t\tmethods:{\r\n\t\t\t\tgetList(){\r\n\t\t\t\t\tthis.level ++;\r\n\t\t\t\t\tlet num = this.level;\r\n\t\t\t\t\tlet list = new Array(num).fill(0).map(()=>new Array(num).fill(0));\r\n\t\t\t\t\tlet row = Math.floor( Math.random()*num );\r\n\t\t\t\t\tlet col = Math.floor( Math.random()*num );\r\n\t\t\t\t\tlist[row][col] = 1;\r\n\t\t\t\t\tthis.tabelData = list\r\n\t\t\t\t},\r\n\t\t\t\tnext(num){\r\n\t\t\t\t\tif(num==1){\r\n\t\t\t\t\t\tthis.getList();\r\n\t\t\t\t\t}else{\r\n\t\t\t\t\t\talert(\"\u4eb2\uff0c\u518d\u4ed4\u7ec6\u770b\u770b\uff01\")\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tgetTime(){\r\n\t\t\t\t\tsetTimeout(()=>{\r\n\t\t\t\t\t\tthis.lastTime--;\r\n\t\t\t\t\t\tif( this.lastTime == 0 ){\r\n\t\t\t\t\t\t\tthis.over = true;\r\n\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\tthis.getTime()\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t},1000)\r\n\t\t\t\t}\r\n\t\t\t},\t\t\r\n\t\t\tmounted(){\r\n\t\t\t\tthis.getList();\r\n\t\t\t\tthis.getTime();\r\n\t\t\t}\t\t\t\r\n\r\n\t\t})\r\n\r\n\t<\/script><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » vue-\u627e\u4e0d\u540c\u6e38\u620f<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u4e4b\u524d\u53d1\u5e03\u8fc7\u4e00\u7bc7\uff0c\u5728\u539f\u6765\u7684\u57fa\u7840\u4e0a\u589e\u52a0\u4e86\u5012\u8ba1\u65f6\u529f\u80fd\u3002 <script src=”\/\/cdn.bootcss.com\/vue\/2.1.10\/vue.js”><\/script> &lt […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[186],"tags":[26,157],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2459"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2459"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2459\/revisions"}],"predecessor-version":[{"id":2460,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2459\/revisions\/2460"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2459"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}