想要的朋友可以去我的资源免费下载或私聊
实现功能:
存储数据至浏览器
适配各种手机屏幕
炫酷动态效果
效果展示:(完成勾选、插入、删除均有炫酷动画)
核心代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<script src="js/lcXys.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<div id="app">
<div class="main">
<div class="header">
<div class="logo">LcTodo</div>
<!-- 绑定回车事件,v-model绑定输入框的value值 -->
<input type="text" v-model="inputValue" id="input" @keydown.enter="enterEvent" placeholder="请输入待办事项" />
</div>
<div class="doing todo">
<h3><span class="title">正在进行</span><span class="num">0</span></h3>
<transition-group name="slide" mode="out-in" enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doingList" :key="'doing'+index">
<!-- <input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox"> -->
<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox">
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group>
</div>
</div>
<div class="done todo">
<h3><span class="title">正在进行</span><span class="num">0</span></h3>
<div class="list">
<transition-group name="slide" enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doneList" :key="'done'+index">
<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox" checked="checked">
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group>
</div>
</div>
</div>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
inputValue: "",
todoList: []
}, computed: {
doingList: function () {
let arr = this.todoList.filter(function (item, index) {
return !item.isDone
})
return arr;
},
doneList: function () {
let arr = this.todoList.filter(function (item, index) {
return item.isDone
})
return arr;
}
}
, methods: {
enterEvent: function (event) {
// console.log(123);
this.todoList.push({
content: this.inputValue,
isDone: false,
id: this.todoList.length
})
this.saveData()
this.inputValue = "";
// console.log(this.todoList);
},
saveData: function () {
localStorage.todoList = JSON.stringify(this.todoList);
}
,
checkDone: function (id) {
console.log(this.todoList[id].isDone);
this.todoList[id].isDone = !this.todoList[id].isDone;
this.saveData();
},
deleteItem: function (id) {
this.todoList.splice(id, 1);
this.todoList.forEach(function (item, i) {
item.id = i;
})
this.saveData();
},
},
mounted: function () {
this.todoList = localStorage.todoList ? JSON.parse(localStorage.todoList) : [];
}
})
</script>
</body>
</html>