HTML部分
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section class="todoapp" id="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus @keyup.enter="add" >
</header>
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox" @click="toggleAll" :checked="toggleStatus" >
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!--
完成状态的样式:completed 未完成状态:不需要样式 编辑状态的样式 editing
-->
<!--
使用中间变量,默认为null,edit的样式就取决于中间变量是否等价于当前的任务项,如果等于,则为true,即条件成立,显示editing
当JS代码很少时,可以直接写内联JS语句
-->
<li v-for="(item,index) in getCom" :key="item.id" :class="{completed:item.completed,editing:item === isTrue}">
<div class="view">
<input class="toggle" type="checkbox" v-model="item.completed">
<label @dblclick="isTrue = item">{{item.title}}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
<input v-focus class="edit" :value="item.title" @keyup.esc=" isTrue = null" @keyup.enter="saveEdit(item,index,$event)">
</li>
</ul>
</section>
<footer class="footer">
<span class="todo-count"><strong>{{getCountComputed}}</strong> item left</span>
<ul class="filters">
<li>
<a :class="{selected: getCom ===1}" href="#/" @click="isType = 1">全部</a>
</li>
<li>
<a href="#/active" :class="{selected: getCom ===2}" @click="isType = 2">未完成</a>
</li>
<li>
<a href="#/completed" :class="{selected: getCom ===3}" @click="isType = 3">已完成</a>
</li>
</ul>
<button class="clear-completed" @click="removeAll" v-show="getCountComputed !== list.length">清除选中</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/app1.js"></script>
</body>
</html>
JS部分
(function () {
const list = [
{id:1,title:'吃饭',completed:false},
{id:2,title:'睡觉',completed:true},
{id:3 ,title:'打豆豆',completed:true}
];
Vue.directive('focus',function (el) {
el.focus();
});
var vm = new Vue({
el:'#todoapp',
data:{
list:list,
isTrue:null,
isType:1
},
methods:{
add(e){
let listText = e.target.value.trim();
if(!listText.length) return false;
let last = this.list[this.list.length -1];
let id = last?last.id+1:1;
this.list.push({id:id ,title:listText,completed:false});
e.target.value = '';
},
toggleAll(e){
let checked = e.target.checked;
this.list.forEach(item =>{
item.completed = checked;
})
},
remove(index){
this.list.splice(index,1);
},
removeAll(){
this.list = this.list.filter(item =>{
return !item.completed;
})
},
saveEdit(item,index,e){
let editText = e.target.value;
if (!editText.length) {
return this.list.splice(index,1);
}
item.title = editText;
this.isTrue = null;
},
},
computed:{
getCountComputed(){
return this.list.filter((item) => !item.completed).length
},
toggleStatus(){
return this.list.every(item => item.completed);
},
getCom(){
if (this.isType === 1){
return this.list;
} else if (this.isType === 2){
return this.list.filter((item) => !item.completed);
} else{
return this.list.filter((item) => item.completed);
}
}
}
})
})();