{"id":2666,"date":"2017-06-13T10:54:59","date_gmt":"2017-06-13T02:54:59","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2666"},"modified":"2017-06-13T10:54:59","modified_gmt":"2017-06-13T02:54:59","slug":"vue%e5%b0%8f%e7%bb%83%e4%b9%a0-%e8%b4%ad%e7%89%a9%e8%bd%a6","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2666","title":{"rendered":"vue\u5c0f\u7ec3\u4e60\u2014\u8d2d\u7269\u8f66"},"content":{"rendered":"

\u5f53\u6ca1\u6709\u5546\u54c1\u9009\u4e2d\u65f6\u5219\u4e0d\u80fd\u63d0\u4ea4\u8868\u5355\uff0c\u652f\u6301\u5168\u9009\u5168\u4e0d\u9009<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<meta charset=\"UTF-8\">\r\n\t\t<title><\/title>\r\n\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdn.bootcss.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\" \/>\r\n\t\t<style>\r\n\t\t.table{\r\n\t\t\tmargin-top: 100px;\r\n\t\t}\r\n\t\t<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div class=\"container hidden\" id=\"app\">\r\n\t\t\t<table class=\"table table-striped table-bordered\">\r\n\t\t\t\t<tr>\r\n\t\t\t\t\t<th>#<\/th>\r\n\t\t\t\t\t<th><input type=\"checkbox\" v-model=\"checkedAll\" v-on:click=\"checkAll()\" \/>\u5168\u9009<\/th>\r\n\t\t\t\t\t<th>\u5546\u54c1<\/th>\r\n\t\t\t\t\t<th>\u5355\u4ef7<\/th>\r\n\t\t\t\t\t<th style=\"width: 120px;\">\u6570\u91cf<\/th>\r\n\t\t\t\t\t<th>\u5c0f\u8ba1<\/th>\r\n\t\t\t\t\t<th>\u64cd\u4f5c<\/th>\r\n\t\t\t\t<\/tr>\r\n\t\t\t\t<tr v-for=\"(item,index) in goods\">\r\n\t\t\t\t\t<td>{{index}}<\/td>\r\n\t\t\t\t\t<td><input type=\"checkbox\" v-model=\"item.checked\" v-on:click=\"checkbox()\" \/><\/td>\r\n\t\t\t\t\t<td>{{item.name}}<\/td>\r\n\t\t\t\t\t<td>{{item.price}}<\/td>\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t<div class=\"input-group\">\r\n\t\t\t\t\t\t\t<span class=\"input-group-addon\" v-on:click=\"reduce(index)\">-<\/span>\r\n\t\t\t\t\t\t  \t<input type=\"text\" class=\"form-control\" aria-label=\"Amount (to the nearest dollar)\" v-model=\"item.num\">\r\n\t\t\t\t\t\t  \t<span class=\"input-group-addon\" v-on:click=\"add(index)\">+<\/span>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t\t<td>{{item.num*item.price}}<\/td>\r\n\t\t\t\t\t<td><button type=\"button\" class=\"btn btn-danger\" v-on:click=\"modal(index)\">\u5220\u9664<\/button><\/td>\r\n\t\t\t\t<\/tr>\r\n\t\t\t\t<tr>\r\n\t\t\t\t\t<td>\u603b\u4ef7<\/td>\r\n\t\t\t\t\t<td colspan=\"5\">{{totalPrice}}<\/td>\r\n\t\t\t\t\t<td><button type=\"button\" class=\"btn btn-danger\" v-on:click=\"modal(-2)\">\u6e05\u7a7a\u8d2d\u7269\u8f66<\/button><\/td>\r\n\t\t\t\t<\/tr>\r\n\t\t\t<\/table>\r\n\t\t\t<button type=\"button\" class=\"btn btn-danger\" v-bind:class=\"{disabled:!submit}\" v-on:click=\"onsubmit()\">\u63d0\u4ea4\u8ba2\u5355<\/button>\r\n\t\t\t<!--\u5f39\u51fa\u6846-->\r\n\t\t\t<div class=\"modal fade\" id=\"mymodal\" tabindex=\"-1\" role=\"dialog\">\r\n\t\t\t\t<div class=\"modal-dialog\" role=\"document\">\r\n\t\t\t\t\t<div class=\"modal-content\">\r\n\t\t\t\t\t\t<div class=\"modal-header\">\r\n\t\t\t\t\t\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;<\/span><\/button>\r\n\t\t\t\t\t\t\t<h4 class=\"modal-title\">\u63d0\u793a<\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div class=\"modal-body\">\r\n\t\t\t\t\t\t\t<p>\u786e\u5b9a\u8981\u5220\u9664{{removegood}}\u5417\uff1f<\/p>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div class=\"modal-footer\">\r\n\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">\u53d6\u6d88<\/button>\r\n\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\" v-on:click=\"remove(nowIndex)\">\u786e\u5b9a<\/button>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- \/.modal-content -->\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<!-- \/.modal-dialog -->\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t<script src=\"http:\/\/apps.bdimg.com\/libs\/jquery\/2.1.4\/jquery.min.js\"><\/script>\r\n\t\t<script src=\"http:\/\/apps.bdimg.com\/libs\/bootstrap\/3.3.4\/js\/bootstrap.min.js\"><\/script>\r\n\t\t<script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"><\/script>\r\n\t\t<script>\r\n\t\t\r\n\t\t\tvar app = new Vue({\r\n\t\t\t\tel:\"#app\",\r\n\t\t\t\tdata:{\r\n\t\t\t\t\ttotalPrice:0,\t\t\t\t\t\/\/\u603b\u91d1\u989d\r\n\t\t\t\t\tnowIndex:-10,\t\t\t\t\t\/\/\u63a7\u5236\u5f39\u7a97\r\n\t\t\t\t\tremovegood:'',\t\t\t\t\t\/\/\u8981\u5220\u9664\u7684\u7269\u54c1\r\n\t\t\t\t\tcheckedAll:false,\t\t\t\t\/\/\u5168\u9009\r\n\t\t\t\t\tsubmit:false,\t\t\t\t\t\/\/\u63d0\u4ea4\uff0ctrue\u4e3a\u53ef\u4ee5\u63d0\u4ea4\uff0cfalse\u4e3a\u4e0d\u80fd\u63d0\u4ea4\r\n\t\t\t\t\tgoods:[\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tid:'001',\r\n\t\t\t\t\t\t\tchecked:false,\r\n\t\t\t\t\t\t\tname:\"javascript\",\r\n\t\t\t\t\t\t\tprice:120,\r\n\t\t\t\t\t\t\tnum:1\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tid:'002',\r\n\t\t\t\t\t\t\tchecked:false,\r\n\t\t\t\t\t\t\tname:\"java\",\r\n\t\t\t\t\t\t\tprice:100,\r\n\t\t\t\t\t\t\tnum:1\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tid:'003',\r\n\t\t\t\t\t\t\tchecked:false,\r\n\t\t\t\t\t\t\tname:\"php\",\r\n\t\t\t\t\t\t\tprice:110,\r\n\t\t\t\t\t\t\tnum:1\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t]\r\n\t\t\t\t},\r\n\t\t\t\tmethods: {\r\n\t\t\t\t\tadd: function(index){\t\t\t\t\t\/\/\u6570\u91cf\u589e\u52a0\r\n\t\t\t\t\t\tthis.goods[index].num++;\r\n\t\t\t\t\t},\r\n\t\t\t\t\treduce: function(index){\t\t\t\t\/\/\u6570\u91cf\u51cf\u5c11\r\n\t\t\t\t\t\tvar vm = this;\r\n\t\t\t\t\t\tvm.goods[index].num--;\r\n\t\t\t\t\t\tif(vm.goods[index].num < 1){\r\n\t\t\t\t\t\t\tvm.goods[index].num = 1;\r\n\t\t\t\t\t\t\tvm.modal(index);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t},\r\n\t\t\t\t\tmodal: function(index){\t\t\t\t\t\/\/\u5f39\u7a97\r\n\t\t\t\t\t\tvar vm = this;\r\n\t\t\t\t\t\tvm.nowIndex = index;\r\n\t\t\t\t\t\tif(index >= 0){\r\n\t\t\t\t\t\t\tvm.removegood = vm.goods[index].name;\r\n\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\tvm.removegood = \"\u8d2d\u7269\u8f66\u5168\u90e8\u5546\u54c1\"\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t$(\"#mymodal\").modal();\r\n\t\t\t\t\t},\r\n\t\t\t\t\tremove: function(n){\t\t\t\t\t\/\/\u5224\u65ad\u662f\u5220\u9664\u4e00\u4e2a\u5546\u54c1\u8fd8\u662f\u6e05\u7a7a\u8d2d\u7269\u8f66\r\n\t\t\t\t\t\tif(n == -2){\r\n\t\t\t\t\t\t\tthis.goods = [];\r\n\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tthis.goods.splice(n,1);\r\n\t\t\t\t\t},\r\n\t\t\t\t\tcheckAll: function(){\t\t\t\t\t\/\/\u5168\u9009\r\n\t\t\t\t\t\tvar vm = this;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tvm.goods.forEach(function(element) {\r\n\t\t\t\t\t\t\tif(vm.checkedAll){\r\n\t\t\t\t\t\t\t\telement.checked = true;\r\n\t\t\t\t\t\t\t\tvm.submit = true;\r\n\t\t\t\t\t\t\t} else{\r\n\t\t\t\t\t\t\t\telement.checked = false;\r\n\t\t\t\t\t\t\t\tvm.submit = false;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t},\r\n\t\t\t\t\tcheckbox: function () {\t\t\t\t\t\/\/\u9009\u4e2d\u67d0\u4e00\u4e2a\u5546\u54c1\uff0c\u5982\u679c\u5168\u90e8\u9009\u4e2d\u5219 checkedAll \u4e3atrue\uff0c\u5982\u679c\u4e00\u4e2a\u90fd\u6ca1\u9009\u4e2d\u5219\u4e0d\u80fd\u63d0\u4ea4\u8ba2\u5355\r\n\t\t\t\t\t\tvar vm = this;\r\n\t\t\t\t\t\tvar len = vm.goods.length;\r\n\t\t\t\t\t\tvar n = 0;\r\n\t\t\t\t\t\tfor (var i = 0; i < len; i++) {\r\n\t\t\t\t\t\t\tif(vm.goods[i].checked){\r\n\t\t\t\t\t\t\t\tn++;\r\n\t\t\t\t\t\t\t\tif(n == len){\r\n\t\t\t\t\t\t\t\t\tvm.checkedAll = true;\r\n\t\t\t\t\t\t\t\t} else{\r\n\t\t\t\t\t\t\t\t\tvm.checkedAll = false;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tif (n > 0) {\r\n\t\t\t\t\t\t\tvm.submit = true;\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tvm.submit = false;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonsubmit: function(){\t\t\t\t\t\/\/\u63d0\u4ea4\u8ba2\u5355\uff0c\u9700\u8981\u5224\u65ad\u662f\u5426\u6709\u9009\u4e2d\u7684\u5546\u54c1\r\n\t\t\t\t\t\tif(this.totalPrice == 0){\r\n\t\t\t\t\t\t\tconsole.log(\"\u8bf7\u9009\u62e9\u8981\u8d2d\u4e70\u7684\u5546\u54c1\")\r\n\t\t\t\t\t\t\treturn false;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tconsole.log(JSON.stringify(this.goods))\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tcomputed: {\t\t\t\t\t\t\t\t\t\/\/\u8ba1\u7b97\u603b\u91d1\u989d\r\n\t\t\t\t\ttotalPrices: function(){\r\n\t\t\t\t\t\tvar total = 0;\r\n\t\t\t\t\t\tthis.goods.forEach(function(mes){\r\n\t\t\t\t\t\t\tif(mes.checked){\r\n\t\t\t\t\t\t\t\ttotal += mes.num*mes.price\r\n\t\t\t\t\t\t\t}\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t\tthis.totalPrice = total;\r\n\t\t\t\t\t\treturn this.totalPrice;\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\twatch:{\t\t\t\t\t\t\t\t\t\t\/\/\u5b9e\u65f6\u89c2\u5bdf\u91d1\u989d\u662f\u5426\u6709\u53d8\u5316\r\n\t\t\t\t\ttotalPrices: function(newValue, oldValue){\r\n\t\t\t\t\t\treturn this.totalPrice = newValue;\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tmounted: function(){\t\t\t\t\t\t\/\/\u4e3a\u4e86\u9632\u6b62\u95ea\u5c4f\uff0c\u6570\u636e\u6e32\u67d3\u540e\u518d\u663e\u793aDOM\r\n\t\t\t\t\t$(\"#app\").removeClass(\"hidden\");\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\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\u5c0f\u7ec3\u4e60\u2014\u8d2d\u7269\u8f66<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u5f53\u6ca1\u6709\u5546\u54c1\u9009\u4e2d\u65f6\u5219\u4e0d\u80fd\u63d0\u4ea4\u8868\u5355\uff0c\u652f\u6301\u5168\u9009\u5168\u4e0d\u9009 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> […]<\/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,163],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2666"}],"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=2666"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2666\/revisions"}],"predecessor-version":[{"id":2667,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2666\/revisions\/2667"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2666"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}