vue指令应用--记事本

转x33g5p2x  于2021-09-24 转载在 Vue.js  
字(8.4k)|赞(0)|评价(0)|浏览(622)

一、应用介绍

该应用实现以下功能：
1、在候选框写下要做的内容按下回车可在列表中显示。
2、点击每个事项右边的x可以删除事项。
3、点击右下角clear可以清空所有事项。
4、左下角显示剩余事项的条数。
5、当记事本中无事项时，隐藏clear和剩余事项条数。

二、功能分析

1、功能一可以使用v-model关联同步候选框内容，使用@keyup.enter绑定事件使内容在记事本中显示。
2、生成删除事项可以用v-for动态生成列表结构，里面信息可以用数组存储。
3、无事项时，隐藏功能可以使用v-show或者v-if，这里建议使用v-show。

三、代码及效果

HTML，js部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="记事本.css">
  10. </head>
  12. <body>
  13.     <!-- 主体区域 -->
  14.     <section id="todoapp">
  15.         <!-- 输入框 -->
  16.         <header class="header">
  17.             <h1>todo记事本</h1>
  18.             <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
  19.         </header>
  20.         <!-- 列表区域 -->
  21.         <section class="main">
  22.             <ul class="todo-list">
  23.                 <li class="todo" v-for="(item,index) in list">
  24.                     <div class="view">
  25.                         <span class="index">{{ index+1 }}.</span>
  26.                         <label>{{ item }}</label>
  27.                         <button class="destroy" @click="remove(index)"></button>
  28.                     </div>
  29.                 </li>
  30.             </ul>
  31.         </section>
  32.         <!-- 统计和清空 -->
  33.         <footer class="footer" v-show="list.length!=0">
  34.             <span class="todo-count" v-if="list.length!=0">
  35.           <strong>{{ list.length }}</strong> items left
  36.         </span>
  37.             <button v-show="list.length!=0" class="clear-completed" @click="clear">
  38.           Clear
  39.         </button>
  40.         </footer>
  41.     </section>
  42.     <!-- 底部 -->
  43.     <!-- <footer class="info">
  44.         <p>
  45.             <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
  46.         </p>
  47.     </footer> -->
  48.     </section>
  49.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  50.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  52.     <script>
  53.         var app = new Vue({
  54.             el: "#todoapp",
  55.             data: {
  56.                 list: ["吃饭", "睡觉", "打豆豆"],
  57.                 inputValue: "写代码",
  58.             },
  59.             methods: {
  60.                 add: function() {
  61.                     if (this.inputValue != '') {
  62.                         this.list.push(this.inputValue);
  63.                     }
  65.                 },
  66.                 remove: function(index) {
  67.                     this.list.splice(index, 1);
  68.                 },
  69.                 clear: function() {
  70.                     this.list = [];
  71.                 }
  72.             }
  73.         })
  74.     </script>
  75. </body>
  77. </html>

css部分

  1. html,
  2. body {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  7. body {
  8.     background: #fff;
  9. }
  11. button {
  12.     margin: 0;
  13.     padding: 0;
  14.     border: 0;
  15.     background: none;
  16.     font-size: 100%;
  17.     vertical-align: baseline;
  18.     font-family: inherit;
  19.     font-weight: inherit;
  20.     color: inherit;
  21.     -webkit-appearance: none;
  22.     appearance: none;
  23.     -webkit-font-smoothing: antialiased;
  24.     -moz-osx-font-smoothing: grayscale;
  25. }
  27. body {
  28.     font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  29.     line-height: 1.4em;
  30.     background: #f5f5f5;
  31.     color: #4d4d4d;
  32.     min-width: 230px;
  33.     max-width: 550px;
  34.     margin: 0 auto;
  35.     -webkit-font-smoothing: antialiased;
  36.     -moz-osx-font-smoothing: grayscale;
  37.     font-weight: 300;
  38. }
  40. :focus {
  41.     outline: 0;
  42. }
  44. .hidden {
  45.     display: none;
  46. }
  48. #todoapp {
  49.     background: #fff;
  50.     margin: 180px 0 40px 0;
  51.     position: relative;
  52.     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  53. }
  55. #todoapp input::-webkit-input-placeholder {
  56.     font-style: italic;
  57.     font-weight: 300;
  58.     color: #e6e6e6;
  59. }
  61. #todoapp input::-moz-placeholder {
  62.     font-style: italic;
  63.     font-weight: 300;
  64.     color: #e6e6e6;
  65. }
  67. #todoapp input::input-placeholder {
  68.     font-style: italic;
  69.     font-weight: 300;
  70.     color: gray;
  71. }
  73. #todoapp h1 {
  74.     position: absolute;
  75.     top: -160px;
  76.     width: 100%;
  77.     font-size: 60px;
  78.     font-weight: 100;
  79.     text-align: center;
  80.     color: rgba(175, 47, 47, .8);
  81.     -webkit-text-rendering: optimizeLegibility;
  82.     -moz-text-rendering: optimizeLegibility;
  83.     text-rendering: optimizeLegibility;
  84. }
  86. .new-todo,
  87. .edit {
  88.     position: relative;
  89.     margin: 0;
  90.     width: 100%;
  91.     font-size: 24px;
  92.     font-family: inherit;
  93.     font-weight: inherit;
  94.     line-height: 1.4em;
  95.     border: 0;
  96.     color: inherit;
  97.     padding: 6px;
  98.     border: 1px solid #999;
  99.     box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  100.     box-sizing: border-box;
  101.     -webkit-font-smoothing: antialiased;
  102.     -moz-osx-font-smoothing: grayscale;
  103. }
  105. .new-todo {
  106.     padding: 16px;
  107.     border: none;
  108.     background: rgba(0, 0, 0, 0.003);
  109.     box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
  110. }
  112. .main {
  113.     position: relative;
  114.     z-index: 2;
  115.     border-top: 1px solid #e6e6e6;
  116. }
  118. .toggle-all {
  119.     width: 1px;
  120.     height: 1px;
  121.     border: none;
  122.     /* Mobile Safari */
  123.     opacity: 0;
  124.     position: absolute;
  125.     right: 100%;
  126.     bottom: 100%;
  127. }
  129. .toggle-all+label {
  130.     width: 60px;
  131.     height: 34px;
  132.     font-size: 0;
  133.     position: absolute;
  134.     top: -52px;
  135.     left: -13px;
  136.     -webkit-transform: rotate(90deg);
  137.     transform: rotate(90deg);
  138. }
  140. .toggle-all+label:before {
  141.     content: "❯";
  142.     font-size: 22px;
  143.     color: #e6e6e6;
  144.     padding: 10px 27px 10px 27px;
  145. }
  147. .toggle-all:checked+label:before {
  148.     color: #737373;
  149. }
  151. .todo-list {
  152.     margin: 0;
  153.     padding: 0;
  154.     list-style: none;
  155.     max-height: 420px;
  156.     overflow: auto;
  157. }
  159. .todo-list li {
  160.     position: relative;
  161.     font-size: 24px;
  162.     border-bottom: 1px solid #ededed;
  163.     height: 60px;
  164.     box-sizing: border-box;
  165. }
  167. .todo-list li:last-child {
  168.     border-bottom: none;
  169. }
  171. .todo-list .view .index {
  172.     position: absolute;
  173.     color: gray;
  174.     left: 10px;
  175.     top: 20px;
  176.     font-size: 16px;
  177. }
  179. .todo-list li .toggle {
  180.     text-align: center;
  181.     width: 40px;
  182.     /* auto, since non-WebKit browsers doesn't support input styling */
  183.     height: auto;
  184.     position: absolute;
  185.     top: 0;
  186.     bottom: 0;
  187.     margin: auto 0;
  188.     border: none;
  189.     /* Mobile Safari */
  190.     -webkit-appearance: none;
  191.     appearance: none;
  192. }
  194. .todo-list li .toggle {
  195.     opacity: 0;
  196. }
  198. .todo-list li .toggle+label {
  199.     /* Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433 IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/ */
  200.     background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
  201.     background-repeat: no-repeat;
  202.     background-position: center left;
  203. }
  205. .todo-list li .toggle:checked+label {
  206.     background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
  207. }
  209. .todo-list li label {
  210.     word-break: break-all;
  211.     padding: 15px 15px 15px 60px;
  212.     display: block;
  213.     line-height: 1.2;
  214.     transition: color 0.4s;
  215. }
  217. .todo-list li.completed label {
  218.     color: #d9d9d9;
  219.     text-decoration: line-through;
  220. }
  222. .todo-list li .destroy {
  223.     display: none;
  224.     position: absolute;
  225.     top: 0;
  226.     right: 10px;
  227.     bottom: 0;
  228.     width: 40px;
  229.     height: 40px;
  230.     margin: auto 0;
  231.     font-size: 30px;
  232.     color: #cc9a9a;
  233.     margin-bottom: 11px;
  234.     transition: color 0.2s ease-out;
  235. }
  237. .todo-list li .destroy:hover {
  238.     color: #af5b5e;
  239. }
  241. .todo-list li .destroy:after {
  242.     content: "×";
  243. }
  245. .todo-list li:hover .destroy {
  246.     display: block;
  247. }
  249. .todo-list li .edit {
  250.     display: none;
  251. }
  253. .todo-list li.editing:last-child {
  254.     margin-bottom: -1px;
  255. }
  257. .footer {
  258.     color: #777;
  259.     padding: 10px 15px;
  260.     height: 20px;
  261.     text-align: center;
  262.     border-top: 1px solid #e6e6e6;
  263. }
  265. .footer:before {
  266.     content: "";
  267.     position: absolute;
  268.     right: 0;
  269.     bottom: 0;
  270.     left: 0;
  271.     height: 50px;
  272.     overflow: hidden;
  273.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
  274. }
  276. .todo-count {
  277.     float: left;
  278.     text-align: left;
  279. }
  281. .todo-count strong {
  282.     font-weight: 300;
  283. }
  285. .filters {
  286.     margin: 0;
  287.     padding: 0;
  288.     list-style: none;
  289.     position: absolute;
  290.     right: 0;
  291.     left: 0;
  292. }
  294. .filters li {
  295.     display: inline;
  296. }
  298. .filters li a {
  299.     color: inherit;
  300.     margin: 3px;
  301.     padding: 3px 7px;
  302.     text-decoration: none;
  303.     border: 1px solid transparent;
  304.     border-radius: 3px;
  305. }
  307. .filters li a:hover {
  308.     border-color: rgba(175, 47, 47, 0.1);
  309. }
  311. .filters li a.selected {
  312.     border-color: rgba(175, 47, 47, 0.2);
  313. }
  315. .clear-completed,
  316. html .clear-completed:active {
  317.     float: right;
  318.     position: relative;
  319.     line-height: 20px;
  320.     text-decoration: none;
  321.     cursor: pointer;
  322. }
  324. .clear-completed:hover {
  325.     text-decoration: underline;
  326. }
  328. .info {
  329.     margin: 50px auto 0;
  330.     color: #bfbfbf;
  331.     font-size: 15px;
  332.     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  333.     text-align: center;
  334. }
  336. .info p {
  337.     line-height: 1;
  338. }
  340. .info a {
  341.     color: inherit;
  342.     text-decoration: none;
  343.     font-weight: 400;
  344. }
  346. .info a:hover {
  347.     text-decoration: underline;
  348. }
  350. /* Hack to remove background from Mobile Safari. Can't use it globally since it destroys checkboxes in Firefox */
  352. @media screen and (-webkit-min-device-pixel-ratio: 0) {
  353.     .toggle-all,
  354.     .todo-list li .toggle {
  355.         background: none;
  356.     }
  357.     .todo-list li .toggle {
  358.         height: 40px;
  359.     }
  360. }
  362. @media (max-width: 430px) {
  363.     .footer {
  364.         height: 50px;
  365.     }
  366.     .filters {
  367.         bottom: 10px;
  368.     }
  369. }

效果图

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/qq_46186155/article/details/119303408

内容来源于网络，如有侵权，请联系作者删除！

前端

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com