<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My todo list</title>
<style>
*{
list-style: none;
outline: none;
border: none;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.app h1,.app p{
text-align: center;
margin-top: 10px;
}
#app{
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2C3E7A;
}
.app{
width: 640px;
margin: 0 auto;
background: #c5c5c5;
padding:30px 10px;
border: 1px solid #2C3E7A;
margin-top: 10px;
position: relative;
box-shadow: 0 0 10px #2C3E7A;
}
.app:before{
content: '';
width: 2px;
border-left: 1px dashed #2C3E7A;
border-right: 1px dashed #2C3E7A;
height: 100%;
position: absolute;
top: 0;
left: 51px;
}
.app li{
cursor: pointer;
height: 45px;
line-height: 45px;
padding-left: 65px;
position: relative;
border-bottom: 1px dashed #2C3E7A;
}
.todo-box li input{
text-align: center;
width: 40px;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin:0 auto;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.todo-box li input:after{
content: '✔';
line-height: 43px;
font-size: 20px;
color: #f0f0f0;
text-shadow: 0 -1px 0 #bfbfbf;
}
.app li.finished{
text-decoration: line-through;
color: #4fc08d;
}
.app li.finished input:after{
color: #4fc08d;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
.typeInput input{
width: 81%;
color: #2C3E7A;
font-size: 24px;
border: 1px solid #2C3E7A;
padding: 1%;
transition: all 0.3s ease-in-out;
}
.typeInput input:focus {
outline: none;
border-color: #2C3E7A;
box-shadow: 0 0 10px #2C3E7A;
}
</style>
</head>
<body>
<div id="app" class="app">
<h1 v-text='title'></h1>
<p class='typeInput'>
<input type="text" v-model='newText' v-on:keyup.enter='addNewlist'>
</p>
<ul class="todo-box">
<li v-for='item in items' v-bind:class='{finished:item.isFinished}'>
<input type="checkbox" v-on:click='toggleFinish(item)'>
{{item.text}}
</li>
</ul>
</div>
<script type="text/javascript" src="http://cn.vuejs.org/js/vue.js"></script>
<script type="text/javascript">
const STORAGE_KEY = 'todos-vuejs';
const Store = {
fetch() {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]');
},
save( items ) {
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
}
};
const app = new Vue({
el: '#app',
data: {
title: 'My todo list',
// items:[
// // {
// // text:'Learn CSS',
// // isFinished:true
// // },
// // {
// // text:'Learn javascript',
// // isFinished:false
// // }
// ],
items: Store.fetch(),
newText: ''
},
//watch深度监听函数，监听的是items的变化
//只要有新的输入内容就会触发，
watch: {
items: {
//val和oldval这里都是对象
handler(items) {
// console.log(items);
Store.save( items );
},
deep:true
}
},
//
methods:{
toggleFinish(item) {
// console.log(item.isFinished);
item.isFinished=!item.isFinished;
},
//3、输入后按enter键盘的事件
addNewlist() {
let _self = this;
//3.1 如果不为空就将刚刚输入的内容以对象的形式，追加到items数组对象内部，
//默认新追加的是没完成的为false
if( _self.newText ) {
_self.items.push({
text: _self.newText,
isFinished: false
});
}
// console.log(_self.newText);
// console.log(this);
//3.2 同时清空input输入框
_self.newText = '';
}
}
});
</script>
</body>
</html>
网友评论