<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="vue.js"></script>
<style>
.isFinish{
background-color: red;
}
</style>
</head>
<body>
<div id="app" class="container text-center">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label for="">添加工作事项</label>
<input type="text" class="form-control" v-model="newItem" @keyup.enter="addItem()">
</div>
<div class="list-group text-left form-group">
<a href="#" class="list-group-item text-left">
工作清单:
</a>
<a href="#" class="list-group-item" v-for="(item,index) in Items">
<span>
{{index+1}} 、 {{item.title}}
</span>
<span class="badge" @click="removeItem(index)">
<i class="glyphicon glyphicon-remove">
</i>
</span>
<span :class="{isFinish:item.isFinish}" @click = "toogleItem(item)" class="badge">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</div>
<div class="list-group text-left form-group">
<a href="#" class="list-group-item text-left">
已完成清单:
</a>
<a href="#" class="list-group-item" v-for="(item,index) in Items" v-if="item.isFinish==true">
<span>
{{index+1}} 、 {{item.title}}
</span>
<span class="badge" @click="removeItem(index)">
<i class="glyphicon glyphicon-remove">
</i>
</span>
<span :class="{isFinish:item.isFinish}" @click = "toogleItem(item)" class="badge">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</div>
</div>
</div>
</div>
<script>
let lsC = (function(){
return {
add(value){
localStorage.setItem('todoList',JSON.stringify(value))
},
get(){
return JSON.parse(localStorage.getItem('todoList'))
},
remove(){
localStorage.removeItem('todoList')
}
}
})()
let vm = new Vue({
el:"#app",
data:{
newItem:'',
Items: lsC.get() || []
},
methods:{
addItem(){
var item={
id:this.Items.length+1,
title:this.newItem,
isFinish:false
}
this.Items.push(item);
lsC.add(this.Items)
this.newItem = ""
},
toogleItem(item){
item.isFinish = !item.isFinish;
lsC.add(this.Items)
},
removeItem(index){
this.Items.splice(index,1)
lsC.add(this.Items)
}
}
})
</script>
</body>
</html>
