Vue.js
关于如何将数据过滤的问题，想实现点击最后span元素切换不同的数据---
粉丝福利 : 关注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;
<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>
}
.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>
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
