{"id":2387,"date":"2017-05-25T11:45:27","date_gmt":"2017-05-25T03:45:27","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2387"},"modified":"2017-05-25T11:45:27","modified_gmt":"2017-05-25T03:45:27","slug":"vue-%e6%89%be%e5%ad%97%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2387","title":{"rendered":"vue-\u627e\u5b57\u6e38\u620f"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<meta charset=\"UTF-8\">\r\n\t\t<title>qdabc.cn<\/title>\r\n\t\t<script src=\"\/\/cdn.bootcss.com\/vue\/2.1.10\/vue.js\"><\/script>\r\n\t\t<style>\r\n\t\t\tbody {\r\n\t\t\t\tbackground: #ffffff;\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#vue-test {}\r\n\t\t\t\r\n\t\t\t#wrapper {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: center;\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}\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<\/head>\r\n\t<body>\r\n\t<div id=\"vue-test\">\r\n\t\t<h1>\r\n\t\t\t\u7b2c{{ levelText }}\u5173\r\n\t   <\/h1>\r\n\t   <div id=\"wrapper\">\r\n\t\t   <table>\r\n\t\t\t  <tr v-for=\"row in table\">\r\n\t\t\t\t<td v-for=\"v in row\" @click=\"choose(v)\">{{ textMap[v] }}<\/td>\r\n\t\t\t  <\/tr>\r\n\t\t   <\/table>\r\n\t   <\/div>\r\n\t<\/div>\r\n\t<script>\r\n\tnew Vue({\r\n\t\tel: \"#vue-test\",\r\n\t\tdata: {\r\n\t\t\ttable: [],\r\n\t\t\ttextMap: ['\u79d1', '\u6296'],\r\n\t\t\tlevel: 1\r\n\t\t\t},\r\n\t\tcomputed: {\r\n\t\t\tlevelText: function() {\r\n\t\t\t\treturn this.level > 10 ? this.level : \"12345678910\".split('')[this.level - 1]\r\n\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tchoose: function(v) {\r\n\t\t\tif(v) {\r\n\t\t\t\tthis.level++\r\n\t\t\t\t\tthis.generateTable()\r\n\t\t\t}\r\n\t\t},\r\n\t\t\tgenerateTable: function() {\r\n\t\t\t\tvar size = this.level + 1\r\n\t\t\t\tvar table = new Array(size).fill(0).map(function() {\r\n\t\t\t\t\treturn new Array(size).fill(0)\r\n\t\t\t\t})\r\n\t\t\t\tvar random = Math.random() * size * size | 0\r\n\t\t\t\tvar row = random \/ size | 0\r\n\t\t\t\tvar col = random - row * size\r\n\t\t\t\ttable[row][col] = 1\r\n\t\t\t\tthis.table = table\r\n\t\t\t}\r\n\t\t},\t\r\n\t\t\tcreated: function() {\r\n\t\t\t\tthis.generateTable()\r\n\t\t\t}\r\n\r\n\t\t})\r\n\t<\/script>\r\n\t<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » vue-\u627e\u5b57\u6e38\u620f<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>qdabc.cn&l […]<\/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,175],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2387"}],"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=2387"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2387\/revisions"}],"predecessor-version":[{"id":2388,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2387\/revisions\/2388"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2387"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}