今天的学习任务是使用vue2实现todolist待办事项
案例
一个简单的todolist待办事项如下显示：
实现功能
- 添加待办事项
- 删除清单
- 选中事项会有删除效果
- 统计完成和剩余事项
- 点击全部、待完成、已完成会进行显示跳转
- 页面样式可以自行设计
引入vue2.js
一定不要忘记引用vue2.js
<script src="vue2.js"></script>
1.添加待办事项
<div class="container"> <h1>小鑫的待办事项清单</h1> <!-- v-model实现数据双向绑定--> <input type="text" class="inp" v-model="content" @keyup.enter="addList" placeholder="请输入待办事项"> <!-- 绑定点击实现实现添加待办事项 --> <button @click="addList">添加待办事项</button> <script> const app = new Vue({ el: '#app', data: { //存储数据 todoList:[ { id:1, content:"上课", state:false }, { id:2, content:"study", state:false }, { id:3, content:'睡觉', state:false }, { id:4, content: '吃饭', state:false } ], content:'', newTodo:'',//双向绑定数据 ckList:[],//绑定复选框存放数据 mode:'all',//all ,active, completed editingItem:null,//当前编辑 }, methods: { //添加待办事项 addList(){ this.todoList.push({ id:this.todoList.length+1, content:this.content, state:false, }); this.newTodo=''; }, </script>
1.
v-model="content"实现数据双向绑定，就可以将数据添加到里面2.按钮事件：
@keyup.enter="addList"输入内容的时候，点击enter可以添加3.
@click="addList"使用点击事件绑定button按钮，点击按钮将会将输入的内容添加到事项中
效果如下显示：
2.删除功能
<!-- todolist数据源--> <table > <tr v-for="(item,index) in showData" :key="item.id"> <td>{{item.id}}.</td> <button @click="delList">删除</button> <td> <!-- 复选框 --> <input type="checkbox" v-model="item.state" > <span :class="item.state===true ? 'checked' : ''"> {{item.content}}</span> </td> </tr> </table>
写在method中
//删除待办事项 delList(index){ this.todoList.splice(index,1); }, ChangeMode(mode){ this.mode=mode; },
复选框选中时将会出现删除线，颜色变灰
.checked { color: #d9d9d9; text-decoration: line-through; }
1.使用
v-for遍历showData,将数据渲染到页面上2.
@click="delList"按钮绑定点击事件在method中实现，点击删除按钮将会删除事项3.复选框选中时将会出现删除线，颜色变灰
代码显示如下
将所有内容删除后将会出现待办事项为空
待办事项为空
3.统计完成事项和剩余事项
<p>共有{{total}}项，还剩{{unCompleteList}}项未完成 </p>
统计总和一般使用computed计算属性来完成
computed: { // 总计个数 total(){ let totalList=0; this.todoList.forEach((item)=>{ if(item.id) { totalList++; } }) return totalList; }, //未完成任务个数 unCompleteList(){ let remain=0; this.todoList.forEach((item)=>{ if(item.state === false){ remain++; } }) return remain; } }
4.点击全部、待完成、已完成会进行显示跳转
<div class="footer" v-show="todoList.length>0"> <p>共有{{total}}项，还剩{{unCompleteList}}项未完成 </p> <!-- //显示数据--> <button @click="ChangeMode('all')">全部</button> <button @click="ChangeMode('active')">待完成</button> <button @click="ChangeMode('completed')">已完成</button> </div>
ChangeMode(mode){ this.mode=mode; }, //显示模式筛选当前视图下的数据 showData(){ if(this.mode==='all'){ return this.todoList; }else if(this.mode==='active'){ return this.todoList.filter(item=>!item.state) }else{ return this.todoList.filter(item=>item.state) } },
代码显示如下
点击按钮便可以进行切换
待完成事项
已完成事项
全部内容
1.使用
v-show切换显示和隐藏todolist中的内容在进行判断，点击全部按钮显示全部事项，点击其他按钮时，使用filter进行过滤，并返回该内容。
以上便是此次todolist实现的所有内容了，有不对的地方欢迎大家指正，这个小案例适合初学vue的同学进行学习。
如果需要源码，可私信我
