{"id":2680,"date":"2017-06-16T21:52:31","date_gmt":"2017-06-16T13:52:31","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2680"},"modified":"2017-06-16T21:52:31","modified_gmt":"2017-06-16T13:52:31","slug":"vue%e5%bc%80%e5%8f%91%e7%9a%84%e7%ae%80%e5%8d%95%e7%95%99%e8%a8%80%e6%9d%bf","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2680","title":{"rendered":"Vue\u5f00\u53d1\u7684\u7b80\u5355\u7559\u8a00\u677f"},"content":{"rendered":"

\u7528Vue\u5199\u4e86\u4e2a\u5f88\u7b80\u5355\u7684\u7559\u8a00\u677f\uff0c\u7528\u4e86localStorage\u6570\u636e\u5b58\u50a8<\/p>\n

<script src=\"\/\/cdn.bootcss.com\/vue\/2.1.6\/vue.min.js\"><\/script>\r\n<style>\r\n\tbody {\r\n\t\ttext-align: center;\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t\tbackground-color: #efefef;\r\n\t}\r\n\t\r\n\tul,\r\n\tli {\r\n\t\tlist-style: none;\r\n\t}\r\n\t\r\n\t* {\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t}\r\n\t\r\n\t.form,\r\n\t.list {\r\n\t\twidth: 500px;\r\n\t\tborder: 1px solid #ddd;\r\n\t\tbackground-color: #fff;\r\n\t\tmargin: 0 auto;\r\n\t\tpadding: 20px;\r\n\t\tmargin-top: 20px;\r\n\t\tborder-radius: 5px;\r\n\t\toverflow: hidden;\r\n\t}\r\n\t\r\n\t.form li {\r\n\t\ttext-align: left;\r\n\t\tfont-size: 14px;\r\n\t\tmargin-bottom: 20px;\r\n\t}\r\n\t\r\n\t.form li input {\r\n\t\twidth: 200px;\r\n\t\theight: 20px;\r\n\t}\r\n\t\r\n\t.form li textarea {\r\n\t\twidth: 450px;\r\n\t\theight: 100px;\r\n\t\tvertical-align: top;\r\n\t}\r\n\t\r\n\t.form li button {\r\n\t\tbackground-color: #0082E6;\r\n\t\tcolor: #fff;\r\n\t\twidth: 80px;\r\n\t\theight: 28px;\r\n\t\ttext-align: center;\r\n\t\tline-height: 28px;\r\n\t\tborder: none;\r\n\t\tborder-radius: 3px;\r\n\t\tcursor: pointer;\r\n\t}\r\n\t\r\n\t.list li {\r\n\t\tfont-size: 12px;\r\n\t\tpadding-bottom: 10px;\r\n\t\tpadding-top: 10px;\r\n\t\tline-height: 24px;\r\n\t\tfloat: left;\r\n\t\twidth: 100%;\r\n\t\tborder-bottom: 1px dotted #ddd;\r\n\t}\r\n\t\r\n\t.list li span {\r\n\t\tfloat: left;\r\n\t\twidth: 80px;\r\n\t\ttext-align: left;\r\n\t\tcolor: #11B95C;\r\n\t}\r\n\t\r\n\t.list li em {\r\n\t\tfont-style: normal;\r\n\t\tfloat: left;\r\n\t\twidth: 400px;\r\n\t\ttext-align: left;\r\n\t}\r\n\t\r\n\t.list li i {\r\n\t\tcolor: red;\r\n\t\tcursor: pointer;\r\n\t\tfont-style: normal;\r\n\t}\r\n<\/style>\r\n<div id=\"app\">\r\n\t<div class=\"form\">\r\n\t\t<ul>\r\n\t\t\t<li>\u7528\u6237\uff1a<input type=\"text\" placeholder=\"\u8f93\u5165\u7528\u6237\" v-model='addForm.name' \/><\/li>\r\n\t\t\t<li>\u5185\u5bb9\uff1a<textarea placeholder=\"\u8f93\u5165\u5185\u5bb9\" v-model='addForm.content'><\/textarea><\/li>\r\n\t\t\t<li><button @click.prevent='addData'>\u63d0\u4ea4<\/button><\/li>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n\t<div class=\"list\">\r\n\t\t<ul>\r\n\t\t\t<li v-for=\"(item,index) in items\">\r\n\t\t\t\t<span>{{item.name}} <i @click=\"del(index)\">X<\/i><\/span>\r\n\t\t\t\t<em style='white-space: pre' v-text='item.content'><\/em>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n<\/div>\r\n<script>\r\n\tvar vm = new Vue({\r\n\t\tel: \"#app\",\r\n\t\tdata: {\r\n\t\t\titems: [],\r\n\t\t\taddForm: {\r\n\t\t\t\tname: '',\r\n\t\t\t\tcontent: '',\r\n\t\t\t},\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\taddData() {\r\n\t\t\t\tif(this.addForm.name.trim() != \"\" && this.addForm.content.trim() != \"\") {\r\n\t\t\t\t\tthis.items.push(this.addForm);\r\n\t\t\t\t\tthis.addForm = {\r\n\t\t\t\t\t\tname: '',\r\n\t\t\t\t\t\tcontent: '',\r\n\t\t\t\t\t}\r\n\t\t\t\t\twindow.localStorage.setItem(\"items\", JSON.stringify(this.items))\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert(\"\u7528\u6237\u548c\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a\uff01\");\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tdel(i) {\r\n\t\t\t\tthis.items.splice(i, 1);\r\n\t\t\t\twindow.localStorage.setItem(\"items\", JSON.stringify(this.items))\r\n\t\t\t}\r\n\t\t},\r\n\t\tmounted() {\r\n\t\t\tif(window.localStorage.getItem(\"items\")) {\r\n\t\t\t\tthis.items = JSON.parse(window.localStorage.getItem(\"items\"));\r\n\t\t\t}\r\n\t\t}\r\n\t})\r\n<\/script><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » Vue\u5f00\u53d1\u7684\u7b80\u5355\u7559\u8a00\u677f<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u7528Vue\u5199\u4e86\u4e2a\u5f88\u7b80\u5355\u7684\u7559\u8a00\u677f\uff0c\u7528\u4e86localStorage\u6570\u636e\u5b58\u50a8 <script src=”\/\/cdn.bootcss.com\/vue\/2.1.6\/vue.min.js”><\/sc […]<\/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":[9,26,379],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2680"}],"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=2680"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2680\/revisions"}],"predecessor-version":[{"id":2681,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2680\/revisions\/2681"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2680"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}