vue实现TodoList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoList</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="./js/vue.js"></script>
<style>
.box {
margin: 0 auto;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
width: 320px;
background-color: #fff;
color: #303133;
}
.btn-group {
margin-top: 10px;
margin-bottom: 10px;
}
.bor {
padding: 5px;
border: 0;
border-radius: 0 !important;
border-bottom: 1px solid #ddd !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.bor>p {
flex: 1;
display: flex;
align-items: center;
margin: 0;
cursor: pointer;
}
.ss {
text-decoration: line-through;
}
.select {
background-color: cornflowerblue !important;
}
.bors {
border: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<h3 class="text-center font"><strong>ToDoList</strong></h3>
<ul class="box list-group">
<li class="list-group-item">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入内容" v-model.lazy="DataText.name"
@keyup.enter="add">
<span class="input-group-btn">
<button class="btn btn-default" type="button" @click="add">添加</button>
</span>
</div>
</li>
<li class="list-group-item text-center">
<div class="btn-group">
<button type="button" class="btn btn-default" v-for="(item,index) in tabData"
:class="{'select':activeIndex==index}" @click="activeIndex=index"> {{item.title}} </button>
</div>
<ul class="list-group text-left">
<li class="bor" v-for="(item,index) in variation(activeIndex)"
v-show="variation(activeIndex)!=0">
<p @click="item.isFinished = !item.isFinished" :class="{'ss':item.isFinished}">{{item.name}}</p>
<button class="btn btn-primary" @click="remove(item.id)">删除</button>
</li>
<li class="list-group-item text-center bors" v-show="variation(activeIndex)==0">
暂无内容
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<script>
if (window.localStorage) {
var storage = window.localStorage;
var DataList = storage.getItem('goods') ? JSON.parse(storage.getItem('goods')) : [];
var app = new Vue({
el: "#app",
data: {
activeIndex: 0,
DataList,
tabData: [
{
id: 1,
title: "全部",
},
{
id: 2,
title: "未完成",
},
{
id: 3,
title: "完成",
},
],
DataText: {
id: new Date().getTime(),
name: '',
isFinished: false
},
},
methods: {
add() {
if (this.DataText.name != '') {
this.DataList.unshift(this.DataText)
this.DataText = {
id: new Date().getTime(),
name: '',
isFinished: false
}
}
},
remove(id) {
this.DataList=this.DataList.filter(ite=>ite.id!=id)
},
variation(index) {
let arr = [];
if (index == 0) {
arr = this.DataList
}
if (index == 1) {
arr = this.DataList.filter(item => !item.isFinished);
}
if (index == 2) {
arr = this.DataList.filter(item => item.isFinished);
}
return arr;
}
},
updated() {
storage.setItem('goods', JSON.stringify(this.DataList))
}
})
}
</script>
</html>