1、在输入框中输入内容后点击添加，即可把内容添加到下面的列表中（如果内容为空则不添加）
2、点击复选框，实现选中或不选中效果（即完成或未完成）
3、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表
4、已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（用到了本地存储）
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>to-do-list</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="todo">
<div style="width: 60%;margin: 0 auto;">
<input type="text" v-model="ipt"/><button type="button" @click="addList">增加</button>
<h3>未完成</h3>
<ul>
<li v-for="(item,index) in list" :key='index' v-if="!item.isok">
<input type="checkbox" v-model="item.isok" @click="edit"/>
{
{item.text}}
<button type="button" @click="delList(index)">删除</button>
</li>
</ul>
<h3>已完成</h3>
<ul style="opacity: 0.5;">
<li v-for="(item,index) in list" :key='index' v-if="item.isok">
<input type="checkbox" v-model="item.isok" @click="edit"/>
{
{item.text}}
<button type="button" @click="delList(index)">删除</button>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#todo',
data:{
// 获取input的内容
ipt:'',
// 列表数据
list:[
// {text:'今天下雨了',isok:true},
// {text:'今天的气温是12度',isok:true},
// {text:'学习新思想',isok:false},
// {text:'争做新青年',isok:false},
]
},
methods:{
addList(){
//获取input框内ipt的内容
var text = this.ipt;
console.log(text);
//将获取到的ipt的内容追加到list中 unshift头部追加
this.list.unshift({text:text,isok:false});
//清空input内容
this.ipt = '';
// 设置localStorage,以键值对的形式进行缓存
// localStorage.setItem('a','789');
localStorage.setItem('arr',JSON.stringify(this.list)); //JSON.stringify() 将json对象转换为字符串
},
delList(index){
//获取数组下标
// console.log(index);
// 给个提示框 是否删除 是则删除 反之
var isDel = window.confirm('确定要删除吗?');
if(isDel){
// 在list数组中查找第index个数据并删除
// splice删除数组中的数据 两个参数：要删除的起始位置 删除几个
this.list.splice(index,1);
localStorage.setItem('arr',JSON.stringify(this.list));
}else{
alert('用户已取消删除!');
}
},
edit(){
var this_ = this;
setTimeout(()=>{
localStorage.setItem('arr',JSON.stringify(this_.list));
})
}
},
// vue声明周期 当页面创建完成之后自动执行
created(){
console.log('页面创建完成');
// localStorage.getItem 获取本地缓存
var slist = localStorage.getItem('arr');
if(slist == null){
this.list = [];
}else{
this.list = JSON.parse(slist);
}
}
})
</script>
</body>
</html>
效果图：
今天就分享到了，希望可以帮助到大家理解初级vue内容，不理解的小伙伴们可以评论区留言或者私信。