这是一个使用Vue.js创建的TodoList应用示例。用户可以输入任务标题，按下回车键添加任务到进行中列表。任务可通过复选框标记为已完成，并移至已完成列表。此外，提供了一个删除功能来移除任务。应用使用了本地存储来持久化数据，确保页面刷新后任务仍然存在。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-model="inputValue" @keydown="kaddFun($event)">
<!-- <button @click="handleClick">提交</button> -->
<br> <br>
<h2>正在进行{{present}}</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" v-model="item.checked" @change="saveList()" /> -----{{item.title}}--- <button @click="moveFun(key)">删除</button>
</li>
</ul>
<h2>已经完成{{over}}</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.checked">
<input type="checkbox" v-model="item.checked" />
-----{{item.title}}------
<button @click="moveFun(key)">删除</button>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
inutValue: '',
list: []
},
computed: {
present() {
let num="";
this.list.map((item) => {
if(!item.checked){
num++;
}
});
return num;
},
over() {
let num = "";
this.list.map((item) => { // map 数组遍历
if (item.checked) {
num++;
}
});
return num;
},
},
methods: {
addFun(inputValue){
if(inputValue!=null && inputValue!=''){
this.list.push({
title: this.inputValue,
checked: false,
}),
this.inputValue = '';
//存储数据
localStorage.setItem('list', JSON.stringify(this.list))
}
},
kaddFun(inputValue) {
if (inputValue.keyCode == 13) {
this.addFun(inputValue);
}
},
moveFun(key) {
// confirm("是否删除"+this.list[key].title+"?");
this.list.splice(key, 1);
localStorage.setItem('list', JSON.stringify(this.list))
},
saveList() {
localStorage.setItem('list', JSON.stringify(this.list))
}
},
//生命周期函数 vue页面刷新就会触发的方法
mounted() {
//json字符串转成json对象
var list = JSON.parse(localStorage.getItem('list'))
//判断list是否存在
if (list) {
//存在则将获取到的list保存刷新后的list中
this.list = list;
}
}
})
</script>
</body>
</html>
扫一扫
2509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
