let vm = new Vue ({
el: '#app',
data: {
title: 'Simple TodoList',
inputNewTodo: '',
todos: [],
doneList: [],
},
methods: {
addNewList: function() {
if(this.inputNewTodo === '') {
alert('請輸入文字')
} else {
this.todos.push(this.inputNewTodo);
this.inputNewTodo = ''
}
},
deleteAllTodos: function() {
this.todos = [];
this.doneList = []
}
},
computed: {
doneListToString: function() {
return this.doneList.join(', ')
},
countTodos: function() {
return this.todos.length
}
},
filters: {
doneListFormat: (str)=> {
return `| ${str} |`
}
},
/* watch: {
doneList: function() {
alert('Good Job！')
}
} */
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<hr>
<div class="inputNewTodo">
<label>輸入待辦事項：
<input type="text"
name="inputNewTodo"
placeholder="請輸入事項"
v-model="inputNewTodo"
@keyup.enter="addNewList"
>
</label>
<button @click="addNewList">新增</button>
</div>
<div class="showNewTodo">
<p v-if="inputNewTodo!=''">
你新增的待辦事項：{{ inputNewTodo }}
</p>
<p v-else>
尚未新增待辦事項。
</p>
</div>
<div class="showTodos">
<h2>待辦事項：</h2>
<p>一共有 {{ countTodos }} 項</p>
<label v-for="item in todos">
<input
type="checkbox"
:value="item"
v-model="doneList"
>
{{ item | doneListFormat }}
</label>
</div>
<div class="showDoneList">
<h2>已完成事項：</h2>
<p
v-if="doneList!=''"
class="done"
>已辦完：{{ doneListToString }}</p>
<p v-else>尚未完成任何事項</p>
</div>
<button @click="deleteAllTodos">刪除所有事項</button>
</div>
</body>
</html>
.done {
color: green
}
.showTodos {
display: flex;
flex-direction: column
}