<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Todolist</h1>
<div>
<input type="text" v-model="value" /> <button @click="addtask()">添加</button>
</div>
<div>
<a v-for="a in statusLink" href="javascript:;" @click="changeStatus(a.id)" :class="{active:a.id === selected}"> {{a.text}} </a>
</div>
<div>
<h2>列表</h2>
<div>
<h3>{{ currentLinkText }}任务{{ showList.length }}个</h3>
<ul>
<li v-for="item in showList">
<input type="checkbox" v-if="item.status !== 'finished'" v-model="item.checked"/>
<span v-if="item.is_edit === false">{{ item.value }}</span>
<span v-else><input v-model="item.value" @blur="editBlur(item, $event)" /></span>
<button v-if="item.is_edit === false" @click="edit(item)">编辑</button></span>
<span v-if="item.status === 'todo' && item.is_edit === false"><button @click="finish(item.id)">完成</button>
<button @click="del(item.id)">删除</button></span>
</li>
</ul>
<div v-show="showList.length > 1"><input type="checkbox" v-model="status"/>全选 <button @click="batchFinish()">完成</button> <button @click="batchDelete()">删除</button></div>
</div>
</div>
</div>
<script>
let app = new Vue({
el : "#app",
data : {
// 文本框value
value : '',
// 列表数组
taskList : [],
// 选中链接项
selected : 'all',
currentLinkText : '全部',
// 链接显示对象
statusLink: [
{text:'全部', id:'all'},
{text:'已完成', id:'finished'},
{text:'未完成', id:'todo'},
]
},
computed : {
// 显示列表
showList : function() {
return this.selected === 'all' ? this.taskList : this.taskList.filter(item => item.status === this.selected)
},
// 全选按钮状态
status: {
get : function() {
},
set : function(value) {
this.showList.map(function(item) {
item.checked = value;
return item;
});
}
}
},
methods : {
// 添加任务
addtask : function() {
this.taskList.push({
'id' : new Date().getTime(),
'value' : this.value,
'status' : 'todo',
'checked' : false,
'is_edit' : false
});
this.value = '';
},
// 单项完成
finish : function(id) {
const item = this.showList.find((item) => item.id === id);
item.status = 'finished';
},
// 单项删除
del : function(id) {
this.taskList = this.showList.filter((item) => item.id !== id);
},
// 编辑
edit : function(item) {
item.is_edit = true;
},
// 编辑 - 失去焦点事件
editBlur : function(item, e) {
if (!e.target.value.trim()) {
alert('请输入内容！');
return;
}
item.is_edit = false;
},
// 状态切换（链接样式改变）
changeStatus : function(id) {
this.selected = id;
this.currentLinkText = this.statusLink.find(item => item.id === id).text;
},
// 批量完成
batchFinish : function() {
let items = this.showList.filter(item => item.checked === true);
items.map(function(item){
item.status = 'finished';
});
},
// 批量删除
batchDelete : function() {
this.taskList = this.showList.filter(item => item.checked === false);
}
}
});
</script>
<style>
a {
text-decoration:none;
}
.finished {
text-decoration: line-through;
}
.active {
font-weight: bold;
}
</style>
</body>
</html>
更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在 天边资源网 。