Vue学习（三）——小案例ToDoList

最新推荐文章于 2024-04-08 15:45:39 发布

SanPhantom

最新推荐文章于 2024-04-08 15:45:39 发布

阅读量463

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_36752728/article/details/83009438

版权

前端专栏收录该内容

45 篇文章 2 订阅

订阅专栏

Vue学习（三）——小案例ToDoList

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Vue • TodoMVC</title>
      <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
      <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
      <!-- CSS overrides - remove if you don't need it -->
      <link rel="stylesheet" href="css/app.css">
      
      <script src="node_modules/vue/dist/vue.js"></script>
   </head>
   <body>
      <section class="todoapp" id="todoapp">
         <header class="header">
            <h1>todos</h1>
            <input class="new-todo" placeholder="What needs to be done?" autofocus @keyup.enter="add">
         </header>
         <!-- This section should be hidden by default and shown when there are todos -->
         <section class="main">
            <input id="toggle-all" class="toggle-all" type="checkbox" @click="selectAll" :checked="!getCountComputed">
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
               <!-- These are here just to show the structure of the list items -->
               <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
               <!--
                  使用中间变量，默认为null，editing的样式就取决于中间变量是否等于当前任务项
               -->
               <li :class="{completed:item.completed, editing: item === isTrue}" v-for="(item, index) in selectList" :key="item.id">
                  <div class="view">
                     <input class="toggle" type="checkbox" v-model="item.completed">
                     <label @dblclick="isTrue = item">{{item.title}}</label>
                     <button class="destroy" @click="del(index)"></button>
                  </div>
                  <input class="edit" :value="item.title" @keyup.esc="isTrue = null" @keyup.enter="saveEdit(item, index, $event)" v-focus @blur="isTrue=null">
               </li>
            </ul>
         </section>
         <!-- This footer should hidden by default and shown when there are todos -->
         <footer class="footer">
            <!-- This should be `0 items left` by default -->
            <span class="todo-count"><strong>{{getCountComputed}}</strong> item left</span>
            <!-- Remove this if you don't implement routing -->
            <ul class="filters">
               <li>
                  <a :class="{selected: isType===0}" href="#/" @click="isType = 0">All</a>
               </li>
               <li>
                  <a :class="{selected: isType===1}" href="#/active" @click="isType = 1">Active</a>
               </li>
               <li>
                  <a :class="{selected: isType===2}" href="#/completed" @click="isType = 2">Completed</a>
               </li>
            </ul>
            <!-- Hidden if no completed items are left ↓ -->
            <button class="clear-completed" @click="delAll" v-show="getCountComputed !== list.length">Clear completed</button>
         </footer>
      </section>
      <!-- Scripts here. Don't remove ↓ -->
      <script src="node_modules/todomvc-common/base.js"></script>
      <script src="js/app.js"></script>
   </body>
</html>

(function (Vue) {
   //渲染数据到页面
   //按回车把编辑的任务数据添加到列表中
   //全选和样式的改变
   //计算剩余任务
   //双击编辑任务项，敲回车保存，还要非空校验，敲esc，还原当前数据
   const list = [
      {id: 1, title: '吃饭', completed: true},
      {id: 2, title: '睡觉', completed: false},
      {id: 3, title: '打豆豆', completed: true},
   ];

   let vm = new Vue({
      el: '#todoapp',
      data: {
         //在es6中，若key和value一致，可以简写
         list,
         isTrue: null,
         isType: 0
      },
      methods: {
         add(e) {
            let last = this.list[this.list.length - 1];
            let id = last ? last.id + 1 : 1;
            this.list.push({id: id, title: e.target.value, completed: false});
            e.target.value = '';
         },
         del(index) {
            this.list.splice(index, 1);
         },
         delAll() {
            this.list = this.list.filter(item => {
               return !item.completed;
            })
         },
         saveEdit(item, index, e) {
            if (!e.target.value.length) {
               return this.list.splice(index, 1);
            }
            item.title = e.target.value;
            this.isTrue = null;
         },
         selectAll(e) {
            this.list.forEach(item => {
               item.completed = e.target.checked;
            });
         },
         selectActive() {
            this.list = this.list.filter(item => {
               return !item.completed;
            })
         },
         selectCompleted() {
            this.list = this.list.filter(item => {
               return item.completed;
            })
         },
      },

      computed: {
         getCountComputed() {
            return this.list.filter(item => {
               return !item.completed;
            }).length;
         },
         selectList() {
            if (this.isType === 0) {
               return this.list;
            } else if (this.isType === 1) {
               return this.list.filter(item => {
                  return !item.completed;
               });
            } else {
               return this.list.filter(item => {
                  return item.completed;
               });
            }
         }
      },

      directives: {
         focus: {
            update: function (el) {
               el.focus();
            }
         }
      }
   });

})(Vue);

在这里插入图片描述

SanPhantom

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（三）——小案例ToDoList

Vue学习（三）——小案例ToDoList&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial
复制链接

扫一扫