<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="todo.css">
<title>mySimple-todoMVC</title>
</head>
<body class="Absolute-Center">
<h1 style="margin-left: 40px">todos</h1>
<div class="todoapp">
<input type="checkbox" v-model="allDone">
<input type="text" v-model="newTodo" autofocus
placeholder="To be done!"
@keyup.enter="addTodo">
<ul class="todos" v-show="todos.length">
<li class="todo" v-for="todo in filteredTodos">
<input type="checkbox" v-model="todo.completed">
<input type="text" v-model="todo.title">
<button @click="removeTodo(todo)">×</button>
</li>
</ul>
<ul class="filters">
<li class="fl btn">{{todos.length}} items left</li>
<li class="fl btn"><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
<li class="fl btn"><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li>
<li class="fl btn"><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li>
<li class="fl btn" @click="clearCompleted()"><a href="#">clearCompleted</a></li>
</ul>
</div>
<script src="../../dist/vue.js"></script>
<script src="node_modules/director/build/director.js"></script>
<script src="js/store.js"></script>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
</body>
</html>
(function (exports) {
'use strict';
var filters = {
all: function (todos) {
return todos;
},
active: function (todos) {
return todos.filter(function (todo) {
return !todo.completed;
});
},
completed: function (todos) {
return todos.filter(function (todo) {
return todo.completed;
});
}
};
exports.app = new Vue({
el: '.todoapp',
data: {
todos: todoStorage.fetch(),
newTodo: '',
visibility: 'active'
},
watch: {
todos: {
handler: function (todos) {//editer
todoStorage.save(todos);
},
deep: true
}
},
methods: {
addTodo: function () {
var value = this.newTodo && this.newTodo.trim();
if(!value) {
return;
}
this.todos.push({title: value, completed: false});
this.newTodo = '';
},
removeTodo: function (todo) {
this.todos.$remove(todo);
},
clearCompleted: function () {
this.todos = filters.active(this.todos);
}
},
computed: {
filteredTodos: function () {
return filters[this.visibility](this.todos);
},
remaining: function () {
return filters.active(this.todos).length;
},
allDone: {
get: function () {
return this.remaining === 0;
},
set: function (value) {
this.todos.forEach(function (todo) {
todo.completed = value;
});
}
}
}
});
})(window);
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300;
}
button,
input[type="checkbox"] {
outline: none;
}
.hidden {
display: none;
}
button {
font-size: 25px;
background: #eee;
padding: 0 8px;
display: none;
}
button:hover {
background: black;
color: red;
}
.fl {
float: left;
}
li {
list-style: none;
}
.todos {
margin-left: -41px;
}
.filters {
margin: 30px -200px;
}
.todo {
width: 190px;
height: 30px;
line-height: 30px;
background: #e5e5e5;
margin-top: 5px;
}
.todo:hover button {
display: inline;
}
a {
font-size: 16px;
padding: 10px 15px;
border: 1px solid transparent;
margin-left: 10px;
text-decoration: none;
color: black;
}
a:hover {
color: #ff6160;
border-color: rgba(175, 47, 47, 0.1);
}
a.selected {
color: #ff6160;
border-color: rgba(175, 47, 47, 0.2);
}
.Absolute-Center {
margin: 0 500px;
}
全文完，觉得本文对你有帮助吗？
讨论(2)
头像找回来啦，另外给你编辑了下样式，以前的老样式太丑啦🤣
@邢文亮 哈哈哈😃