{"id":135,"date":"2018-06-23T22:21:53","date_gmt":"2018-06-23T14:21:53","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=135"},"modified":"2020-06-20T23:09:06","modified_gmt":"2020-06-20T15:09:06","slug":"vue-todolist","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2018\/06\/23\/vue-todolist\/","title":{"rendered":"vue todolist"},"content":{"rendered":"
\n

\u8fd9\u91cc\u5b9e\u73b0\u4e00\u4e2atodolist\u7684\u589e\u5220\u6539\u67e5\u6392\u5e8f\u6837\u4f8b\uff0c\u4f9b\u5176\u4ed6\u5f00\u53d1\u4eba\u5458\u53c2\u8003\u3002<\/p>\n

\u7ed3\u6784<\/h2>\n

\u9879\u76ee\u7ed3\u6784<\/h3>\n

\"vue<\/p>\n

\u9664\u57fa\u7840\u6837\u5f0f\u5916\uff0c\u8fd9\u91cc\u4e0d\u4f7f\u7528\u539f\u751fcss\uff0c\u57fa\u7840\u6837\u5f0f\uff1a<\/p>\n

html,body{\n    width:100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n}\ndiv,ul,li,button,input{\n    margin: 0;\n    padding: 0;\n}\n<\/code><\/pre>\n
\u6f14\u793a\u6837\u5f0f\uff0c\u6b63\u5f0f\u5f00\u53d1\u8bf7\u4f7f\u7528\u516c\u5171\u521d\u59cb\u5316\u6837\u5f0f(\u9879\u76ee\u516c\u5171\u3001\u56e2\u961f\u9075\u5b88\u3001reset css\u6216\u8005normalize css\u7b49)\u3002<\/p>\n
\u9875\u9762\u7ed3\u6784<\/h3>\n
<div class=\"index\">\n    <a href=\"http:\/\/www.indeex.cc\">\n      <img src=\"..\/assets\/logo.png\" class=\"logo\">\n    <\/a>\n    <div class=\"container\">\n      <div class=\"submit\">\n        <input type=\"text\" placeholder=\"Your add content\">\n        <button>add<\/button>\n      <\/div>\n      <div class=\"seacher\">\n        <input type=\"text\" placeholder=\"Your seach keyword\">\n        <button>seach<\/button>\n      <\/div>\n      <div class=\"other\">\n        <button>a-z(chinese)<\/button>\n        <button>time<\/button>\n      <\/div>\n      <ul>\n        <li><\/li>\n      <\/ul>\n    <\/div>\n\n<\/div>\n<\/code><\/pre>\n
\u9875\u9762\u7ed3\u6784\u6839\u636e\u9700\u8981\u8c03\u6574\uff0c\u8fd9\u91cc\u53ea\u505a\u6f14\u793a\uff0c\u6b63\u5f0f\u5f00\u53d1\u4e0d\u8981\u4f7f\u7528\u6b64\u7ed3\u6784\u3002<\/p>\n
\u5bf9\u4e8eul li<\/code>\u4f7f\u7528\u7ec4\u4ef6\uff1a<\/p>\n
<!-- \u6b64\u7ed3\u6784\u4ec5\u4f9b\u6f14\u793a -->\n<template>\n  <div class=\"li\">\n    <li>\n      {{item.title}}\n      <div class=\"modify\">\n        <input type=\"text\">\n        <div class=\"btns\">\n          <button class=\"confim\">ok<\/button>\n          <button class=\"cancel\">cancel<\/button>\n        <\/div>\n      <\/div>\n    <\/li>\n\n    <button>delete<\/button>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
\u529f\u80fd<\/h2>\n
\u5f00\u59cb\u529f\u80fd\u7f16\u5199\uff0c\u7f16\u5199\u589e\u52a0\u529f\u80fd\u3002<\/p>\n
\u589e\u52a0<\/h3>\n
\u6dfb\u52a0\u589e\u52a0\u6570\u636e\u4e8b\u4ef6\uff1a<\/p>\n
\u7ed3\u6784\uff1a<\/p>\n
<div class=\"submit\">\n    <input type=\"text\" placeholder=\"Your add content\">\n    <button @click=\"onClickHandler\">add<\/button>\n<\/div>\n<\/code><\/pre>\n
\u4ea4\u4e92\uff1a<\/p>\n
private list: object[] = [];\nprivate inputValue: string = \"\";\nprivate id: number = 0;\n\nprivate onClickHandler(e: object): void {\n    let obj: object = {\n      id: ++ this.id,\n      timer: new Date().getTime(),\n      title: this.inputValue\n    };\n    this.list.push(obj);\n    this.inputValue = \"\";\n}\n<\/code><\/pre>\n
\u9274\u4e8e\u76ee\u524d\u5f88\u4e0d\u7a33\u5b9a\uff0c\u4e14vue cli\u7ecf\u5e38\u5d29\u6e83\uff0c\u8fd9\u91cc\u5efa\u8bae\u6682\u65f6\u5c06\u4e8b\u4ef6\u53c2\u6570e: object<\/code>\u7684\u7c7b\u578b\u8bbe\u7f6e\u4e3aany<\/code>\u7c7b\u578b\uff0c\u5f85\u7a33\u5b9a\u540e\u518d\u786e\u5b9a\u7c7b\u578b\u6216\u8005\u81ea\u5df1\u66f4\u6539\u4e3b\u7c7b\u578b(\u4e0d\u5efa\u8bae)\u3002<\/p>\n
\u8fd9\u91cc\u4e0d\u9700\u8981\u5176\u4ed6\u8bbf\u95ee\u6743\u9650\uff0c\u4f7f\u7528private<\/code>\u5373\u53ef\uff0c\u5982\u679c\u9700\u8981class\u7684\u5b9e\u73b0\u8bbf\u95ee\uff0c\u8bf7\u4f7f\u7528protected<\/code>\uff0c\u516c\u5f00\u8bbf\u95ee\u6743\u9650\u4f7f\u7528public<\/code>\uff0c\u9ed8\u8ba4\u6743\u9650\u4e3a\u5305\u5185\u8bbf\u95ee\u6743\u9650\u3002<\/p>\n
\u7ed9input<\/code>\u8f93\u5165\u6846\u6dfb\u52a0\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\uff1a<\/p>\n
<input type=\"text\" v-model=\"inputValue\" placeholder=\"Your add content\">\n<\/code><\/pre>\n
\u5220\u9664<\/h3>\n
\u5220\u9664\u529f\u80fd\uff0c\u5220\u9664\u6309\u94ae\u5199\u5728\u5b50\u7ec4\u4ef6\u4e2d\uff1a<\/p>\n
\u5b50\u7ec4\u4ef6\u7ed3\u6784\uff1a<\/p>\n
<button @click=\"delClick(index)\">delete<\/button>\n<\/code><\/pre>\n
\u5b50\u7ec4\u4ef6\u4ea4\u4e92\uff0c\u8fd9\u91cc\u4f7f\u7528\u7236\u5b50\u7ec4\u4ef6\u4f20\u503c\u65b9\u5f0f\uff1a<\/p>\n
@Prop() private item!: any;\n@Prop() private delClick!: Function;\n@Prop() private index!: number;\n<\/code><\/pre>\n
\u6ce8\u610f\u53d8\u91cf\u7c7b\u578b\u4e0e\u7236\u7ec4\u4ef6\u58f0\u660e\u7684\u7c7b\u578b\u4fdd\u6301\u4e00\u81f4\u3002<\/p>\n
\u7236\u7ec4\u4ef6\u7ed3\u6784\uff1a<\/p>\n
<ul>\n    <Li v-for=\"(item, index) in list\" v-bind:key=\"index\" v-bind:index=\"index\" v-bind:item=\"item\" v-bind:delClick=\"delClickHandler\"><\/Li>\n<\/ul>\n<\/code><\/pre>\n
\u7236\u7ec4\u4ef6\u4ea4\u4e92\uff0c\u5c06\u5220\u9664\u80fd\u529b\u4ea4\u7ed9\u7236\u7ec4\u4ef6\uff1a<\/p>\n
private delClickHandler(index: number): void {\n    this.list.splice(index, 1);\n}\n<\/code><\/pre>\n
\u8fd9\u91ccindex<\/code>\u53c8\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u56de\u6765\u3002<\/p>\n
\u4fee\u6539<\/h3>\n
\u4fee\u6539\u529f\u80fd\u9700\u8981\u589e\u52a0\u65b0\u7684\u7ed3\u6784\uff1a<\/p>\n
\u5b50\u7ec4\u4ef6\u7ed3\u6784\uff1a<\/p>\n
<li @click=\"modifyClickHandler(index)\">\n      {{item.title}}\n      <div class=\"modify\" v-if=\"!hideClass\">\n        <input type=\"text\" v-model=\"modifyValue\">\n        <div class=\"btns\">\n          <button class=\"confim\" @click.stop=\"confim\">ok<\/button>\n          <button class=\"cancel\" @click.stop=\"cancel\">cancel<\/button>\n        <\/div>\n      <\/div>\n<\/li>\n<\/code><\/pre>\n
\u9632\u6b62\u7236\u7ea7\u89e6\u53d1\u4e8b\u4ef6\uff0c\u5728@click<\/code>\u589e\u52a0.stop<\/code>\u963b\u6b62\u5b50\u7ea7\u5411\u7236\u7ea7\u5192\u6ce1\u3002<\/p>\n
\u589e\u52a0\u70b9\u51fbli<\/code>\u6807\u7b7e\u65f6\uff0c\u63a7\u5236\u663e\u793a\u4fee\u6539\u7684\u53d8\u91cf\uff1a<\/p>\n
private hideClass: boolean = true;\n<\/code><\/pre>\n
\u5b50\u7ec4\u4ef6\u4ea4\u4e92\uff1a<\/p>\n
@Prop() private modifyClick!: Function;\nprivate modifyValue: string = this.item.title;\n\nprivate modifyClickHandler(index: number): void {\n    this.hideClass = false;\n  }\nprivate confim(e: any): void {\n    this.modifyClick(this.modifyValue, this.index);\n    this.cancel(null);\n}\nprivate cancel(e: any = null): void {\n    this.hideClass = true;\n}\n<\/code><\/pre>\n
\u7531\u4e8e\u9700\u8981\u5728\u70b9\u51fb\u786e\u5b9a\u65f6\u5173\u95ed\u4fee\u6539\u754c\u9762\uff0c\u8c03\u7528cancel<\/code>\u65b9\u6cd5\uff0c\u5c06\u4e8b\u4ef6\u53c2\u6570e: any<\/code>\u9ed8\u8ba4\u8bbe\u7f6e\u4e3anull<\/code>\u3002<\/p>\n
\u7236\u7ec4\u4ef6\u4ea4\u4e92\uff1a<\/p>\n
private modifyClickHandler(value: string, index: number): void {\n    this.list.forEach((item: any, _index: number) => {\n      if (_index === index) {\n        item.title = value;\n      }\n    });\n}\n<\/code><\/pre>\n
\u5229\u7528\u7236\u5b50\u7ec4\u4ef6\u4f20\u9012\u7684index\u4fee\u6539\u6307\u5b9a\u5185\u5bb9\u5373\u53ef\u3002<\/p>\n
\u641c\u7d22<\/h3>\n
\u641c\u7d22\u529f\u80fd\u76f8\u5bf9\u4e8e\u4fee\u6539\u529f\u80fd\u7b80\u5355\u5f88\u591a\u3002<\/p>\n
\u7ed3\u6784\uff1a<\/p>\n
<div class=\"seacher\">\n    <input type=\"text\" v-model=\"seachValue\" placeholder=\"Your seach keyword\">\n    <button @click=\"seachClickHandler\">seach<\/button>\n<\/div>\n<\/code><\/pre>\n
\u4ea4\u4e92\uff1a<\/p>\n
private seachValue: string = \"\";\n\nprivate seachClickHandler(e: any): void {\n    if (this.seachValue.length > 0) {\n      this.list = this.list.filter((item: any, index: number) => {\n        \/\/ if(item.title === this.seachValue){\/\/\u7cbe\u786e\u641c\u7d22\n        if (item.title.indexOf(this.seachValue) > -1) {\n          return true;\n        } else {\n          return false;\n        }\n      });\n    }\n}\n<\/code><\/pre>\n
\u5982\u679c\u9700\u8981\u7cbe\u786e\u641c\u7d22\u5230\u6307\u5b9a\u7684\u5185\u5bb9\uff0c\u76f4\u63a5\u5224\u65aditem.title === this.seachValue<\/code>\u662f\u5426\u5b8c\u5168\u76f8\u540c\u5373\u53ef\u3002<\/p>\n
\u6392\u5e8f<\/h3>\n
\u7ed3\u6784\uff1a<\/p>\n
<div class=\"other\">\n    <button @click=\"sortClickHandler\">a-z(chinese)<\/button>\n<\/div>\n<\/code><\/pre>\n
\u4ea4\u4e92\uff1a<\/p>\n
private sortB: boolean = false;\n\nprivate sortClickHandler(e: any): void{\n    this.sortB = !this.sortB;\n    this.list = this.list.sort((a: any, b:any): any => {\n      if(this.sortB) return a.title.localeCompare(b.title,'zh');\n      else b.title.localeCompare(a.title,'zh');\n    });\n}\n<\/code><\/pre>\n
\u8fd9\u91cc\u4ee5\u4e2d\u6587\u6392\u5e8f\u4e3a\u4e3b\uff0c\u5982\u679c\u9700\u8981\u672c\u5730\u5316\u6392\u5e8f\uff0c\u53bb\u6389\u7b2c\u4e8c\u4e2a\u53c2\u6570'zh'<\/code>\u5373\u53ef\u3002<\/p>\n
\u7136\u540e\uff0c\u5b8c\u5584\u4e00\u4e0b\u5176\u4ed6\u529f\u80fd\u3002<\/p>\n
\u6837\u5f0f<\/h2>\n
\u6839\u636e\u4e2a\u4eba\u559c\u597d\uff0c\u7565\u3002<\/p>\n
\"vue<\/p>\n
\u529f\u80fd\u548c\u6837\u5f0f\u57fa\u672c\u5b8c\u5584\u3002<\/p>\n
demo\u8bf7\u8bbf\u95ee\uff1a💻todolist💻<\/a><\/p>\n
code enjoy! \u00d2\u072b\u00d3<\/p>\n
\u4f5c\u8005\uff1aindeex<\/p>\n
\u94fe\u63a5\uff1ahttp:\/\/indeex.cc<\/a><\/p>\n
\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n
\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u91cc\u5b9e\u73b0\u4e00\u4e2atodolist\u7684\u589e\u5220\u6539\u67e5\u6392\u5e8f\u6837\u4f8b\uff0c\u4f9b\u5176\u4ed6\u5f00\u53d1\u4eba\u5458\u53c2\u8003\u3002 \u7ed3\u6784 \u9879\u76ee\u7ed3\u6784 \u9664\u57fa\u7840\u6837\u5f0f\u5916\uff0cRead More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/135"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/135\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}