Vue 加一個todolist功能
<div id="app">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">待辦事項</span>
</div>
<input type="text" class="form-control" v-model="newTodo" placeholder="準備要做的任務" v-on:keyup.enter="addTodo">
<div class="input-group-append">
<button class="btn btn-primary" v-on:click="addTodo" type="button">新增</button>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link" :class="{'active' : visibility == 'all'}" @click="visibility = 'all'" href="#">全部</a>
</li>
<li class="nav-item">
<a class="nav-link " :class="{'active' : visibility == 'active'}" @click="visibility = 'active' " href="#">進行中</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="{'active' : visibility == 'completed'}" @click="visibility = 'completed' " href="#">已完成</a>
</li>
</ul>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item"
@dblclick="editTodo(item)"
v-for="(item,key) in filteredTodos">
<div class="d-flex"
v-if ="item.id !== cacheTodo.id" >
<div class="form-check">
<input type="checkbox" v-model="item.completed" class="form-check-input" :id="item.id">
<label :class="{'completed' : item.completed} " class="form-check-label" :for="item.id">
{{ item.title }}
</label>
</div>
<button type="button" class="close ml-auto" aria-label="Close" v-on:click="removeTodo(item.id)">
<span aria-hidden="true">×</span>
</button>
</div>
<input type="text" class="form-control"
v-model="cacheTitle"
@keyup.esc="cancelEdit()"
v-if ="item.id == cacheTodo.id"
@keyup.enter="doneEdit(item)"
>
</li>
<!-- <li class="list-group-item">
<input type="text" class="form-control">
</li> -->
</ul>
<div class="card-footer d-flex justify-content-between">
<span>還有 3 筆任務未完成</span>
<a href="#">清除所有任務</a>
</div>
</div>
</div>
<script>
// 按到label 觸發id到input ,觸發input 就會觸發v-model false--->true---> item.completed變成false 就會加上completed 的class
var app = new Vue({
el: '#app',
data: {
newTodo: '',
todos: [{
id: '123', title: '你好', completed: false,
},
],
cacheTodo:{},
cachetitle:'',
visibility: 'all'
},
methods: {
addTodo: function () {
var value = this.newTodo.trim(); //空格會被刪掉
var timestamp = Math.floor(Date.now())
if (!value) { //value為空值時就不能執行
return;
}
this.todos.push({
id: timestamp,
title: value,
completed: false,
})
this.newTodo = '';
},
removeTodo: function (key) {
for (var i = 0; i < this.todos.length; i++) {
if (this.todos[i].id == key) {
this.todos.splice(i, 1)
}//當刪除那筆key的timestamp = todos裡的timestamp
}//就刪除當下的index
},
editTodo: function (item) {
this.cacheTodo =item;
this.cacheTitle=item.title
},
cancelEdit:function(){
this.cacheTodo='';
},
doneEdit: function(item){
console.log(item.title)
item.title= this.cacheTitle;
console.log(item.title)
this.cacheTitle ='';
console.log(item.title)
this.cacheTodo={};
console.log(item.title)
}
},
computed: {
filteredTodos: function () {
if (this.visibility == 'all') {
return this.todos;
} else if (this.visibility == 'active') {
var newTodos = [];
this.todos.forEach(function (item) {
if (!item.completed) {
newTodos.push(item);
}
})
return newTodos;
} else if (this.visibility == 'completed') {
var newTodos = []
this.todos.forEach(function (item) {
if (item.completed == true) {
newTodos.push(item)
}
})
console.log(newTodos)
return newTodos;
}
}
}
});
</script>
<script>
//timestamp 現在的時間數字
//Math.floow 取整理
//Date.now 現在的時間
//this.todos.push() 新增一個物件進去todos
</script>
<style>
.completed {
text-decoration: line-through;
}
</style>