关于如何将数据过滤的问题,想实现点击最后span元素切换不同的数据---
发布于 7 年前 作者 weijie 3677 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> <title>Todo</title> <style> * { margin: 0; padding: 0; } ul,li { list-style: none; } #app { width: 500px; margin:50px auto; background-color: #eee; } h1 { width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 40px; font-weight: 900; } .list>li { box-sizing:border-box; padding: 0 20px; width: 100%; height: 40px; line-height: 38px; border-bottom: 1px solid #fff; } .left { float: left; } .right { float: right; } .right>span{ font-size: 12px; color: #aaa;
	}
	.right>button {
		width: 16px;
		height: 20px;
	}
	.add {
		width: 100%;
		height: 40px;
		box-sizing:border-box;
		font-size: 20px;
		background-color: #eee;
		border:1px solid #ddd;
		text-indent: 1em;
	}
	.foot {
		box-sizing:border-box;
		width: 100%;
		height: 40px;
		padding:0 10px ;
		background-color: #eee;
		line-height: 40px;
		text-align: center;
	}
	.l {
		float: left;
	}
	.r {
		float: right;
	}
	.r>span {
		margin-right: 20px;
	}
	.r>span.active {
		color:red;
		font-weight: 700;
	}
	.inComplate {
		color:#ccc;
		text-decoration: line-through;
	}
</style>
</head> <body>

Todo

<input type="text" class="add" placeholder='will to do' [@keyup](/user/keyup).enter="addData(todo)" v-model="todo">
  • <input type="checkbox" v-model="item.isComplate"> {{item.msg}}
    {{item.time}} <button [@click](/user/click)="deleteData(item.id)">X</button>
count:{{count}}
all complate incomplete
<script> var vm = new Vue({ el:"#app", data:{ todo:'', items:'' }, computed:{ count:function(){ var num = 0, items = this.items; for(var i =0,length=items.length;i<length;i++){ if(!items[i].isComplate){ num ++; } } if(items !== ''){ this.setData(items); } return num; } }, methods:{ upData:function(data){ this.data }, addData:function(msg){ // console.log(msg); if(msg === ''){ return; } var data = this.getData() || []; console.log(data); for(var i =0,length=data.length;i<length;i++){ //防止设置相同的事情 if(msg === data[i].msg){ return; } } var formatDate = function (date) { //用来获取 2017-10-1这样格式的时间字符串 var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? '0' + m : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d; return y + '-' + m + '-' + d; }; var num = data.length+1; data.push({ isComplate:false, msg:msg, time:formatDate(new Date()), id:num }); this.todo = ''; this.items = data; this.setData(data); }, getData:function(){ var data = localStorage.getItem('todo'); return JSON.parse(data); }, setData:function(data){ console.log(data); var str = JSON.stringify(data); localStorage.setItem('todo',str); }, deleteData:function(id){ var data = this.getData(); data.splice(id,1); for(var i=0,length=data.length;i<length;i++){ //重新设置id data[i].id = i; } this.items = data; this.setData(data); } }, ready:function(){ this.items = this.getData(); } }) </script> </body> </html>
回到顶部