<style>
li{ list-style: none; }
#root{
400px;
min-height: 400px;
box-shadow: 0 0 10px #666;
margin: 20px auto;
padding: 20px;
}
.task-input{
100%;
height: 30px;
padding-left: 10px;
font-size: 13px;
border: 1px solid #ccc;
}
.task-count{
padding: 0;
height: 30px;
clear: both;
}
.task-count li:first-of-type{
float: left;
font-size: 14px;
color: red;
}
.task-count .action{
float: right;
padding: 0;
}
.task-count .action a{
font-size: 14px;
text-decoration: none;
color: #888;
display: inline-block;
padding: 2px 8px;
border: 1px solid #fff;
}
.task-count .action .active{
border-color: #888;
}
.tasks{
box-shadow: 0 0 2px #ccc;
padding: 10px;
}
.tasks .todo-list{
padding: 0;
margin: 0;
}
.tasks .todo-list .todo{
height: 40px;
line-height: 40px;
}
.tasks .todo-list .active{
color: #999;
text-decoration: line-through;
}
.tasks .todo-list .destroy{
color: red;
background: #fff;
border: none;
float: right;
margin-top: 12px;
cursor: pointer;
}
.tasks .todo-list .editing .view{
display: none;
}
.tasks .todo-list .editing .edit{
display: block;
}
.tasks .todo-list .edit{
display: none;
80%;
padding: 4px 10px;
}
</style>
<div id="root">
<p>添加任务:</p>
<input
class="task-input"
placeholder="输入任务 回车即可添加任务"
type="text"
v-on:keyup.enter="addTodo"
v-model="todo"
>
<ul class="task-count" v-show="list.length">
<li>{{noCheckedLength}} 个任务未完成 </li>
<li class="action">
<a class="active" href="javascript:;">所有任务</a>
<a href="javascript:;">未完成的任务</a>
<a href="javascript:;">完成的任务</a>
</li>
</ul>
<p>任务列表:</p>
<div class="tasks">
<span v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
<todo-item
class="todo"
:class="{active: item.isChecked, editing: item === edtorTodos}"
v-for="(item, index) in list"
:content="item"
:index="index"
></todo-item>
</ul>
</div>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: `
<li>
<div class="view">
<input class="toggle" type="checkbox" v-model="content.isChecked">
<label @dblclick="edtorTodo(content)">{{content.title}}</label>
<button class="destroy" @click="deleteTodo(index)">x</button>
</div>
<input
type="text"
class="edit"
v-model="content.title"
@blur="edtorTodoed(content, index)"
@keyup.13="edtorTodoed(content, index)"
@keyup.esc="cancelTodo(content)"
/>
</li>
`,
data () {
return {
}
}
})
new Vue({
el: '#root',
data: {
list: [
{
title: 'xiaobai'
}
],
todo: '',
edtorTodos: '', // 记录编辑的数据
beforeTitle: ''
},
methods: {
// addTodo () {
// if(!this.todo) return;
// this.list.push({
// title: this.todo,
// isChecked: false
// })
// this.todo = '';
// },
// watch: {
// list: {
// }
// },
// deleteTodo (index) { // 删除
// this.list.splice(index, 1)
// },
// edtorTodo (todo) { // 编辑
// this.beforeTitle = todo.title;
// this.edtorTodos = todo;
// },
// edtorTodoed (todo, index) { // 编辑成功
// // 如果输入框为空 则删除列表
// if(!todo.title) this.list.splice(index, 1);
// this.edtorTodos = ''
// },
// cancelTodo (todo) { // 取消编辑
// todo.title = this.beforeTitle;
// this.edtorTodos = ''
// }
},
// directives: { // 自定义组件
// 'focus': {
// update (el, binding){
// if(binding.value){
// el.focus();
// }
// }
// }
// },
computed: {
noCheckedLength () { // 计算未完成任务的数量
return this.list.filter(function(item){
return !item.isChecked
}).length
}
}
})
</script>