1.在空文件夹中打开终端 输入指令： vue init webpack 项目名
2. cd 项目名
3.下载依赖包 cnpm install
4.启动服务器测试vue脚手架 npm run dev
5.任意组件内写即可，拿我来说，我就在App.vue组件内写的。代码如下
<template>
<div class="todo">
<h3>ToDoList</h3>
<input type="text" v-model="task" @keyup.enter="add" >
<div>
<h3>正在进行 {{ count1 }} </h3>
<ul>
<li v-for="(item,index) of list" v-if="!item.del && !item.done" :key="item.id" >
<input type="checkbox" v-model="item.done" >
<p style="display:inline-block"> {{ item.title }} </p>
<button @click="del(item.id)" >X {{ item.id }}</button>
</li>
</ul>
</div>
<div>
<h3>已经完成 {{ count2 }}</h3>
<ul>
<li v-for="item of list2" :key="item.id">
<input type="checkbox" v-model="item.done" >
<p style="display:inline-block"> {{ item.title }} </p>
<button @click="del(item.id)">X {{ item.id }}</button>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
components:{},
props:{},
data(){
return {
task:"",
list:[]
}
},
watch:{},
computed:{
list2(){
return this.list.filter(function(item){
return item.done&&!item.del //item.done==true 返回正在进行 任务中 done为true(即已打√)
})
},
count1(){
let n = 0;
for(let i=0;i<this.list.length;i++){ //input框添加到正在进行任务中未打钩 和 未删除 任务数量
if(this.list[i].done == false && !this.list[i].del ){
n++
}
}
return n;
},
count2(){
let n = 0;
for(let i=0;i<this.list.length;i++){
if(this.list[i].done == true && !this.list[i].del ){ //正在进行任务中打钩 和 已完成任务中未删除 任务数量
n++
}
}
return n;
}
},
methods:{
add(){
var task = this.task;
var id = this.list.length + 1//因为已完成中的每一项 并不是 已完成的每一项的索引 ，所以手动添加 id，来获取id所对应的独一无二的数据
this.list.unshift({id:id,title:task,done:false,del:false}); //在数组头添加 done:false 为未打钩 del:false 为未删除
this.task = ""
},
del(n){
//this.list.splice(n,1)
//this.list[n].del = true
//找到对应id的索引
var index = this.list.findIndex(function(item){
return item.id == n
})
//alert(index)
//改变状态
this.list[index].del = true
}
},
created(){
// this.$watch('list',function(){
// localStorage.setItem('list',JSON.stringify(this.list))
// },{deep:true})
},
mounted(){
// console.log(JSON.parse(localStorage.getItem('list')))
// if(localStorage.getItem('list')){
// this.list=JSON.parse(localStorage.getItem('list'))
// }
}
}
</script>
<style scoped>
</style>
在浏览器显示如下：
此样式有些简单，可按自己喜欢的来哦！！
