【Vue】TodoList的邏輯

輸入

• input

v-bind : newTodo（和newTodo雙向綁定）

• button

@click: addTido（把newTodo寫入todolist）

呈現

v-for=”(item,key) in todos” /

{todolist.title}

刪除button

@click: “removeTodo(key)” 把資料刪除

Vue:data

1. todolist:{id:XXX,title:XXX,completed:}
2. newTodo:””

Vue:method

1. addTodo:

                var value = this.newTodo.trim();
                if (!value) {
                  return;
                }
                var timestamp = Math.floor(Date.now());
                this.todos.push({
                  id: timestamp,
                  title: value,
                  completed: false
                })
                this.newTodo = '';
              }

2.removeTodo：

function (key) {
                this.todos.splice(key, 1)
              }

​

頁籤寫法

<li class="nav-item">
                  <a class="nav-link" :class="{'active':visibilty == 'all'}" @click="visibilty ='all'" href="#">全部</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" :class="{'active':visibilty == 'doing'}" @click="visibilty ='doing'" href="#">進行中</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" :class="{'active':visibilty == 'done'}" @click="visibilty ='done'" href="#">已完成</a>

data裡面寫 visibilty: "all"

computed

computed: {
              filteredTodos: function () {
                if (this.visibilty == 'all') {
                  return this.todos;
                } else if (this.visibilty == 'done') {
                  var newTodos = [];
                  this.todos.forEach(function (item) {
                    if (item.completed) {
                      newTodos.push(item);
                    }
                  })
                  return newTodos;
                } else if (this.visibilty == 'doing') {
                  var newTodos = [];
                  this.todos.forEach(function (item) {
                    if (!item.completed) {
                      newTodos.push(item);
                    }
                  })
                  return newTodos;
                }
              }
            }

​