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>