vue-简单的todolist

来源：互联网发布：尼尔森数据怎么拉取编辑：程序博客网时间：2024/05/22 07:48
<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>
<inputclass="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>
<buttonv-bind:class="{ active1:status == 'ALL'}"id="button2"type="button"v-on:click="changeView('ALL')">All</button>
<buttonv-bind:class="{ active1:status == 'COMPLETED'}"id="button2"type="button"v-on:click="changeView('COMPLETED')">Completed</button>
<buttonv-bind:class="{ active1:status == 'WAIT'}"id="button2"type="button"v-on:click="changeView('WAIT')">Wait</button>
<buttonid="button1"type="button"v-on:click="deleteFinish()">Clear completed</button>
</div>
</div>
</div>
</div>
</template>
<script>

import Storefrom "./store.js";
import Store1from "./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 defaultstore;
</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: whitesolid;
height: 30px;
font-size: 11px;
border-radius: 5px;
background: -webkit-linear-gradient(lightblue,lightblue);
color: gray;
}

.input__field--haruki {
width: 96%;
padding: 0.4em0.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>
阅读全文
0 0