vue写todolist

最新推荐文章于 2022-11-03 20:34:19 发布

蒲小若

最新推荐文章于 2022-11-03 20:34:19 发布

阅读量453

点赞数

分类专栏：前端开发经验总结录文章标签： vue todolist

本文链接：https://blog.csdn.net/qq_39585562/article/details/78402693

版权

前端开发经验总结录专栏收录该内容

40 篇文章 1 订阅

订阅专栏

温馨提示：使用之前要下载vue.js和mui.css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/mui.css"/>
		<script src="js/vue.js"></script>
		<style type="text/css">
			.done{
				color: gray;
				text-decoration: line-through;
			}
			.content{
				width: 1200px;
				margin: 20px auto 0;
			}
		</style>
	</head>
	<body>
		<div id="app" class="content">
			<p><input type="text" value="" v-model="current.name" placeholder="添加事项" @keyup.enter="addItem"/></p>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" v-for="item in filterList">
					<span :class="{'done' : !item.done}" v-if="currentItem != item" @dblclick="editItem(item)">{{item.name}}</span>
					<input type="text" v-model="currentItem.name" v-if="currentItem == item" @keyup.enter="doneItem(item)" value="" />
					<div>
						<button class="mui-badge-danger" @click="deleteItem(item)">删除</button>
						<button class="mui-badge-purple" @click="completed(item)">{{item.done ? "完成" : "取消"}}</button>
					</div>
				</li>
			</ul><br />
			<button class="mui-badge-green" @click="setFlag('all')">({{items.length}})全部</button>
			<button class="mui-badge-blue" @click="setFlag('done')">({{doneNum}})完成</button>
			<button class="mui-badge-primary" @click="setFlag('undo')">({{undoNum}})待完成</button>
		</div>
	</body>
	<script>
		/*封装一个存取localstorage的对象*/
		var store = {
			save(key,value){   //存数据
				console.log("存数据");
				localStorage.setItem(key,JSON.stringify(value));
			},
			fetch(key){    //取数据
				console.log("取数据");
				return JSON.parse(localStorage.getItem(key))||[];
			}
		}
		new Vue({
			el : "#app",
			data : {
				current : {name:"",done : "true"},
				items : [
					{name : "javascript",done : "true"},
					{name : "c++",done : "true"},
					{name : "php",done : "true"},
					{name : "java",done : "true"}
				],
				currentItem : {},
				flag : "all"
			},
			methods : {
				addItem (){
					console.log(this.current);
					if(this.current.name.length==0){return};
					console.log(this.current.name + "=============");
					this.items.unshift(this.current);
					this.current = {name : "",done : "true"};
				},
				deleteItem(item){
					let index = this.items.indexOf(item);
					this.items.splice(index,1);
				},
				completed(item){
					console.log("完成");
					item.done = !item.done;
				},
				editItem(item){
					this.currentItem = item;
				},
				doneItem(item){
					item = this.currentItem;
					this.currentItem = {};
				},
				setFlag(str){
					this.flag = str;
				}
			},
			computed : {
				filterList(){
					console.log(this.flag);
					return this.items.filter(item => {
						if(this.flag == "done"){
								return !item.done;
						}else if(this.flag == "undo"){
							
								return item.done;
						}
						else{
							return true;
						}
					})
				},
				doneNum(){
					return this.items.filter(item => {return !item.done}).length||0;
				},
				undoNum(){
					return this.items.filter(item => {return item.done}).length||0;
				}
			},
			watch :{
				filterList : {
					handler : function () {
						store.save("todolist",this.filterList);
					},
					deep : true   //深监控
				}
			},
			created () {
//				alert("hello");
				this.items = store.fetch("todolist");
				console.log("数据" , this.items);
			}
		})
	</script>
</html>

蒲小若

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue写todolist

温馨提示：使用之前要下载vue.js和mui.css .compeleted{ text-decoration: line-through; color: gray; } toDoList {{item.name}}
复制链接

扫一扫

专栏目录