vue-简单的todolist

<template>
<div
class="root">
<!-- <div class="bg" style="font-size:0">
<img v-bind:src="imgArr[cur_img_index]">
<img v-bind:src="imgArr[cur_img_index]">

</div> -->
<!-- 加背景图 -->
<div
class="fg">
<div>
<h1
v-text="title"
class="title1"></h1>
<input
class="input__field--haruki"
placeholder="What need to be done?"
size="50"
v-model="newItem"
v-on:keyup.enter="addNew">
<ul>
<ol>
<li
style="font-size:20px;color:white;"
v-for="item
in items" :key="item"
v-bind:class="{finished:item.isFinished}"
v-on:click="toggleFinish(item)"
v-if="status ==
'ALL' || (status ==
'COMPLETED' && item.isFinished ) || (status ==
'WAIT' && !item.isFinished )">
{{item.label}}
</li>
</ol>
</ul>
<div>
<span
style="font-size:14px;color:pink;">
{{this.items.length}}
</span>
<span
style="font-size:14px;color:pink;">
{{length}}
</span>
</br>
<button
v-bind:class="{ active1:
status == 'ALL'}"
id="button2"
type="button"
v-on:click="changeView('ALL')">All</button>
<button
v-bind:class="{ active1:
status == 'COMPLETED'}"
id="button2"
type="button"
v-on:click="changeView('COMPLETED')">Completed</button>
<button
v-bind:class="{ active1:
status == 'WAIT'}"
id="button2"
type="button"
v-on:click="changeView('WAIT')">Wait</button>
<button
id="button1"
type="button"
v-on:click="deleteFinish()">Clear completed</button>
</div>
</div>
</div>
</div>
</template>
<script>

import Store
from "./store.js";
import Store1
from "./store1.js";

var store =
{
data: function() {
return {
value1: true,
title: "This is Huszhao's todo list",
items: Store.fetch(),
newItem: "",
status: "ALL",
length: Store1.fetch(),
cur_img_index:
0,
// imgArr: [
// "./static/img/184206193834504049.jpg",
// "./static/img/353606399233063781.jpg",
// "./static/img/636747182734407343.jpg",
// "./static/img/766203104798834849.jpg",
// "./static/img/516948497276327542.jpg",
// "./static/img/523081143107948229.jpg",
// "./static/img/699594654613090383.jpg",
// ], 加背景图链接
inNum: 0
}
},
created: function() {
console.log('注册成功');
window.onbeforeunload = ()
=> {
Store.save(this.items)
Store1.save(this.length)
}
this.inNum =
setInterval(() => {
this.cur_img_index = (this.cur_img_index +
1) % this.imgArr.length
}, 2000)
},
watch:
{
items:
{
handler: function(items) {
if (this.items.length ==
0) {
this.length =
"item"
}
else if (this.items.length ==
1) {
this.length =
"item contain"
}
else {
this.length =
"items contain"
}
}
},
deep: true
},
methods:
{
handleIconClick:
function() {
this.newItem =
"";
},
toggleFinish:
function(item) {
item.isFinished = !item.isFinished
},
deleteFinish:
function() {
this.items =
this.items.filter(i
=> !i.isFinished)
},
changeView: function(status) {
this.status =
status
},
addNew: function() {
this.items.push
({
label: this.newItem,
isFinished: false
})
this.newItem =
""
},
cancel: function() {
clearInterval(this.inNum)
}
}
}
export default
store;
</script>
<style>
.title1 {
color: pink;
opacity: 0.6;
}

.finished {
text-decoration:
line-through;
color: #AFB5BB;
opacity: 0.6;
display: block;
}

html {
height: 100%;
}

body {
background-color:
black;
height: 100%;
padding: 0;
margin: 0;
}

#button1 {
float: right;
vertical-align:
bottom;
height: 34px;
width: 100px;
font-size: 11px;
border-radius:
5px;
background: -webkit-linear-gradient(top,
#66B5E6, #2e88c0);
color: white;
}

#button2 {
border: white
solid;
height: 30px;
font-size: 11px;
border-radius:
5px;
background: -webkit-linear-gradient(lightblue,
lightblue);
color: gray;
}

.input__field--haruki {
width: 96%;
padding: 0.4em
0.25em;
background: transparent;
color: #AFB5BB;
font-size: 1em;
}

.active1 {
color: blue
!important;
}

.root {
position: relative;
height: 100%;
width: 100%;
}

.bg,
.fg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}

.fg {
display: flex;
align-items:
center;
justify-content:
center;
}

.bg img {
height: 100%;
width: 50%;
}
</style>