前言:从开始写第一篇博客我就在思考我的博客该怎么写,说真的从入手vue开始我也是一篇篇的翻着别人的技术博客过来,从基础的v-on、v-if等基础标签的应用到源码详解层次的都有。我想写一些属于我自己的东西。
todoList插件
这是一个学习完vue基础之后很适合小白那练练手的小插件,东西功能很简单逻辑也不复杂,但如果你可以自己完全敲出来,那恭喜你vue基础过关了!
博主比较懒只实现了功能,样式一片空白(素颜),爱美的同学可以自己发挥。好下面我们直接上代码:
<template>
<div>
<input type="text" @keyup.enter="addMsg">
<ul>
<li v-for="item in data" :key="item.id"><input type="checkbox" v-model="item.state" @change="stateWatch"/>{{item.msg}}<button @click="deleteOne(item)">删除</button></li>
</ul>
一共<span>{{data.length}}</span>条
<button @click="showAll">全部</button>
<button @click="showFinished">已完成</button>
<button @click="showBacklog">未完成</button>
<button @click="clearFinished">清除完成</button>
</div>
</template>
<script>
export default {
name:"todoList",
data(){
return {
allMsg:[],
flag:0
}
},
computed:{
data(){
if(this.flag==0){
return this.allMsg;
}else{
let backlog=[];
let finished=[];
this.allMsg.forEach(msg => {
msg.state?finished.push(msg):backlog.push(msg)
});
return this.flag==1?backlog:finished
}
}
},
methods:{
addMsg(){
let msg={id:"",msg:"",state:false};
msg.id=Math.random()*1000;
msg.msg=msg.id+event.target.value;
this.allMsg.push(msg);
},
stateWatch(){
console.log(this.allMsg)
},
showAll(){
this.flag=0;
},
showFinished(){
this.flag=2;
},
showBacklog(){
this.flag=1;
},
clearFinished(){
this.flag=1;
this.allMsg=this.data;
},
deleteOne(msg){
this.allMsg.splice(this.allMsg.indexOf(msg),1)
}
}
}
</script>
<style>
ul{
list-style: none;
}
</style>