{"id":515,"date":"2020-02-26T17:01:28","date_gmt":"2020-02-26T09:01:28","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=515"},"modified":"2020-02-26T17:01:28","modified_gmt":"2020-02-26T09:01:28","slug":"vue-%e5%88%97%e8%a1%a8%e6%b8%b2%e6%9f%93-todolist","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/26\/vue-%e5%88%97%e8%a1%a8%e6%b8%b2%e6%9f%93-todolist\/","title":{"rendered":"Vue-\u5217\u8868\u6e32\u67d3-todolist"},"content":{"rendered":"
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n<style>\n    \n    .active{\n        \/*background-color: red;*\/\n        text-decoration: line-through;\n    }\n\n\n<\/style>\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    \n   \t<div id=\"box\">\n\n      <input type=\"text\" v-model=\"text\"\/>\n      <button @click=\"handleAdd()\">add<\/button>\n   \t\t<ul>\n       <li :class=\"data.isMarked?'active':''\" v-for=\"data,index in list\" @click=\"handleClick(index)\">\n         {{data.value}}\n         <button @click=\"handleDelClick(index)\">del<\/button>\n        <button @click=\"handleMarkClick(index)\">mark<\/button>\n\n       <\/li> \n      <\/ul>\n   \t<\/div>\n\n   <script type=\"text\/javascript\">\n\n  \t\tvar vm = new Vue({\n        el:\"#box\",\n\n        data:{\n          list:[],\n          text:'',\n          current:0\n        },\n\n        methods:{\n          handleClick(index){\n            console.log(index);\n            this.current= index;\n          },\n          handleAdd(){\n            this.list.push({\n              value:this.text,\n              isMarked:false\n            });\n          },\n          handleDelClick(index){\n            this.list.splice(index,1)\n          },\n          handleMarkClick(index){\n            this.list[index].isMarked = !this.list[index].isMarked\n          }\n\n        }\n      })\n   \t  \n   <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset= …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[9,10],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/515"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/515\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}