结构
<div class="container">
<h1>todos</h1>
<div class="header">
<input type="checkbox" v-model="checkall">
<input type="text" @keyup.13="addTodo" v-model="newtodo">
</div>
<ul class="list">
<li v-for="todo in todos | my cur">
<input type="checkbox" class="my-list" v-model="todo.select">
<div class="list-content">
<label class="label">{{todo.value}}</label>
<input class="content" type="text" v-model="todo.value">
<button class="button" @click="remove(todo)">x</button>
</div>
</li>
</ul>
<div class="footer">
<span>共选中{{count}}</span>
<ul>
<li @click="cur='all'" :class="{active:cur=='all'}">all</li>
<li @click="cur='active'" :class="{active:cur=='active'}">active</li>
<li @click="cur='completed'" :class="{active:cur=='completed'}">completed</li>
</ul>
<button class="clear" v-show="count&&cur=='completed'" @click="clear()">clear completed</button>
</div>
</div>
绑定数据
Vue.filter('my', function (value,begin) {
if(begin=='all'){
return value;
}else if(begin =='active'){
return value.filter(function (item) {
return item.select==false;
})
}else if(begin =='completed'){
return value.filter(function (item) {
return item.select!=false;
})
}
});
var vm = new Vue({
el:'.container',
data:{
todos:[],
newtodo:'',
cur:'all',
count:0
},
ready: function () {
$(document).on('mouseenter','.list li',function () {
$(this).find('button').show();
})
$(document).on('mouseleave','.list li',function () {
$(this).find('button').hide();
});
$(document).on('dblclick','.list-content', function () {
$(this).find('input').show().focus();
});
$(document).on('blur','.list-content input', function () {
$(this).hide()
});
},
methods:{
addTodo: function () {
this.todos.push({select:false,value:this.newtodo});
this.newtodo = '';
},
remove(todo){
this.todos.$remove(todo)
},
clear: function () {
this.todos = this.todos.filter((item)=>{
return !item.select
});
}
},
computed:{
count:function(){
var count = 0;
this.todos.forEach(function (item) {
if(item.select==true){
count++;
}
});
return count
},
checkall:{
set: function (value) {
this.todos.forEach(function (item) {
item.select = value;
})
}
}
}
})
样式
h1{ text-align: center;line-height: 60px}
*{margin: 0;padding: 0}
li{list-style: none}
.container{width: 500px;margin: 0 auto}
.header input[type='text']{ width: 90%;float: right;height: 30px;line-height: 30px}
.header input[type='checkbox'],.my-list{width: 30px;height: 30px;}
.my-list:checked + div>label{text-decoration: line-through;}
.my-list{float: left;margin-top: 10px;}
.list{margin-top: 10px}
.list li{height: 50px;line-height: 50px;border-bottom: 1px dashed #000}
.list-content{float: right;width: 90%;position: relative}
.label{width: 50%;float: left;}
.content{position: absolute;top:0;left: 0;width: 100%;height: 100%;border: 0; display: none}
.list button{width: 50px;height: 50px; float: right;}
.list button{display: none}
.footer{position: relative}
.footer span{line-height: 40px;}
.footer ul li{ display: inline-block; width: 90px;height: 30px;line-height: 30px;border: 1px solid palevioletred;text-align: center; -webkit-user-select: none}
.clear{position: absolute;bottom: 0;right:0;;}
.footer ul li.active{border: 1px solid blue}
静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<h1>todos</h1>
<div class="header">
<input type="checkbox">
<input type="text">
</div>
<ul class="list">
<li>
<input type="checkbox" class="my-list">
<div class="list-content">
<label class="label">hello</label>
<input class="content" type="text">
<button class="button">x</button>
</div>
</li>
</ul>
<div class="footer">
<span>共选中</span>
<ul>
<li>all</li>
<li>active</li>
<li>completed</li>
</ul>
<button class="clear">clear completed</button>
</div>
</div>
<style>
h1{ text-align: center;line-height: 60px}
*{margin: 0;padding: 0}
li{list-style: none}
.container{width: 500px;margin: 0 auto}
.header input[type='text']{ width: 90%;float: right;height: 30px;line-height: 30px}
.header input[type='checkbox'],.my-list{width: 30px;height: 30px;}
.my-list:checked + div>label{text-decoration: line-through;}
.my-list{float: left;margin-top: 10px;}
.list{margin-top: 10px}
.list li{height: 50px;line-height: 50px;border-bottom: 1px dashed #000}
.list-content{float: right;width: 90%;position: relative}
.label{width: 50%;float: left;}
.content{position: absolute;top:0;left: 0;width: 100%;height: 100%;border: 0; display: none}
.list button{width: 50px;height: 50px; float: right;}
.list button{display: none}
.footer{position: relative}
.footer span{line-height: 40px;}
.footer ul li{ display: inline-block; width: 90px;height: 30px;line-height: 30px;border: 1px solid palevioletred;text-align: center; -webkit-user-select: none}
.clear{position: absolute;bottom: 0;right:0;;}
.footer ul li.active{border: 1px solid blue}
</style>
</body>
</html>