快樂小demo-Vue實現todoList 記事本

火腿腸燒烤大賽冠軍發表於2020-10-14
原文網址 : https://blog.csdn.net/s2422617864/article/details/109088402
Vue

想要的朋友可以去我的資源免費下載或私聊

實現功能：

儲存資料至瀏覽器
適配各種手機螢幕
炫酷動態效果

效果展示：（完成勾選、插入、刪除均有炫酷動畫）

在這裡插入圖片描述

核心程式碼：

<!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>

相關文章