Vue案例之todoLIst实现
使用Vue实现todolist案例，如有不对敬请大佬多多指教
功能：
1、增加功能：在新增版块里面的输入框内输入数据，点击后面的“添加”按钮，将输入的数据添加到列表中，默认是未完成的
2、点击列表里面每一项后面的“完成”按钮，完成按钮会消失并且文字会出现删除线
3、在操作版块点击按钮，进行切换列表，在完成列表里面只显示已经完成的事项，在未完成的列表里面只显示未完成的事项
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>标题</title>
</head>
<style>
* {
margin: 0;
padding: 0;
} li {
list-style: none;
font-size: 16px;
line-height: 26px; } .add {
width: 100%;
height: 100px;
border: 3px solid #123;
box-sizing: border-box;
} .list {
width: 100%;
border: 3px solid #709;
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 20px;
padding-left: 20px;
box-sizing: border-box;
} .oper {
display: flex;
width: 100%;
height: 40px;
border: 3px solid #700;
box-sizing: border-box;
} .oper button {
margin-left: 20px;
padding: 5px
} h2 {
font-size: 20px;
line-height: 26px;
color: rgb(18, 87, 238);
margin: 10px
} input {
margin-right: 20px
} .act {
background-color: rgb(213, 0, 0);
color: aliceblue
} .under {
text-decoration: line-through;
}
</style>
<body>
<div id='app'>
<div class="add">
<h2>新增</h2>
<!-- 用户输入框 实现双向数据绑定-->
<input type="text" v-model='value'>
<!-- 添加按钮，点击这个按钮，数据会进行添加 -->
<button @click="addLIstData">添加</button>
</div>
<ul class="list">
<h2>列表</h2>
<!-- 使用循环指令，对需要展示的数据进行循环 -->
<!--每一个数据都是一个对象，对象里面具有三个值，分别是id唯一值 value显示的数据 isTodo是否完成 -->
<li v-for="item in showList" :key="item.id">
<!-- 显示列表数据 -->
<!-- 绑定class，表达式成立进行显示-->
<span :class="{under:item.isTodo == 'true'}"> {{item.value}} </span>
<!-- 对按钮添加点击事件并将这一个数据的id进行传递 -->
<!-- 对按钮添加v-if判断，如果这项数据完成了就去掉按钮 -->
<button v-if="item.isTodo == 'false' " @click="finish(item.id)"> 完成 </button>
</li>
</ul>
<div class="oper">
<h2>操作</h2>
<!-- 切换列表的按钮 -->
<!-- 三个切换按钮使用数组进行存储，每一项都是一个对象，对象里面具有两个值，分别是 btn按钮上显示的内容 id唯一值 -->
<!-- 对每一个按钮添加点击事件，并传递这个按钮的唯一值 -->
<button v-for="item in oper" @click="cutList(item.id)" :class="{act:item.id === selected}"> {{item.btn}} </button>
</div>
</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 创建Vue实例
new Vue({
// 绑定区域
el: '#app',
// 创建数据
data: {
// 显示列表
showList:[],
// 所有的数据的列表，用户添加的数据会直接到达这里
addList:[],
// 输入框双向数据绑定
value:'请输入数据',
// 操作按钮上的数据
oper:[
{
btn: "所有",
id: 'all'
},
{
btn: "完成",
id: 'true'
},
{
btn: "未完成",
id: 'false'
},
],
// 点击的那个操作按钮，默认情况下所有
selected: 'all'
},
// 添加方法
methods:{
//添加按钮的方法
addLIstData(){
// 将用户输入的内容插入到addList列表中
this.addList.push({
id:new Date().getTime(),//数据的唯一值设置成时间戳
value:this.value,//用户输入的数据
isTodo:'false'//默认是未完成的
})
// 最后将输入框内的数据进行清空
this.value = ''
// 修改玩数据之后对列表重新渲染
this.showList = this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected))
},
// 完成按钮的方法
finish(id){
// 接受一个参数表示操作哪一个数据
// 通过查找id确定操作的是第几个
const index = this.showList.findIndex(item => item.id === id)
// 查找到之后将这一个的isTodo尽心更改
this.showList[index].isTodo = 'true'
// 修改玩数据之后对列表重新渲染
this.showList = this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected))
},
// 切换列表的按钮的方法
cutList(id){
// 接受一个参数，确定是点击的哪一个
// 将存储点击按钮的数据进行更改
this.selected = id
// 对列表进行操作
this.showList = this.addList.filter(item => (id == 'all' || item.isTodo == id))
}
}, })
</script>
</html>
此代码在设置列表的时候使用了三次，造成了一定的内存浪费，可以通过计算属性进行更改优化
将每一个方法里面的“修改玩数据之后对列表重新渲染”，进行删除，将其写在计算属里面，并且将数据里面的“showList”删除。
需要注意的是在计算属性中需要使用return进行返回
Vue示例代码如下
// 创建Vue实例
new Vue({
// 绑定区域
el: '#app',
// 创建数据
data: {
// 显示列表
// showList:[],//此处删除
// 所有的数据的列表，用户添加的数据会直接到达这里
addList: [],
// 输入框双向数据绑定
value: '请输入数据',
// 操作按钮上的数据
oper: [{
btn: "所有",
id: 'all'
},
{
btn: "完成",
id: 'true'
},
{
btn: "未完成",
id: 'false'
},
],
// 点击的那个操作按钮，默认情况下所有
selected: 'all'
},
// 添加方法
methods: {
//添加按钮的方法
addLIstData() {
// 将用户输入的内容插入到addList列表中
this.addList.push({
id: new Date().getTime(), //数据的唯一值设置成时间戳
value: this.value, //用户输入的数据
isTodo: 'false' //默认是未完成的
})
// 最后将输入框内的数据进行清空
this.value = ''
// 修改玩数据之后对列表重新渲染
// this.showList = this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected))//此处删除
},
// 完成按钮的方法
finish(id) {
// 接受一个参数表示操作哪一个数据
// 通过查找id确定操作的是第几个
const index = this.showList.findIndex(item => item.id === id)
// 查找到之后将这一个的isTodo尽心更改
this.showList[index].isTodo = 'true'
// 修改玩数据之后对列表重新渲染
// this.showList = this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected))//此处删除
},
// 切换列表的按钮的方法
cutList(id) {
// 接受一个参数，确定是点击的哪一个
// 将存储点击按钮的数据进行更改
this.selected = id
// 对列表进行操作
// this.showList = this.addList.filter(item => (id == 'all' || item.isTodo == id))//此处删除
}
},
// 添加计算属性
computed: {
// 需要计算的数据
showList() {
// 一定要注意返回
return this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected))
} } })
Vue案例之todoLIst实现的更多相关文章
- Vue编写的todolist小例子
Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...
- 黑马eesy_15 Vue：04.Vue案例（ssm环境搭建）
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
- 通过Vue实现的todolist
和接口对接的todolist因为有后台的存在,todolist获取的数据会一直存在不丢失(不管你如何刷新页面),思路如下: 首先得先搞到接口: 通过这个接口地址可以获取整段的数据,成功err为0. 于 ...
- [vue案例的知识点]todo-list
文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...
- vue案例todolist备忘录
项目效果:https://cinderellastory.github.io/todolist/dist/index.html#/ 项目链接:https://github.com/Cinderella ...
- vue写的ToDoList
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue入门到TodoList练手
学习资料 慕课网 - vue2.5入门 基础语法 示例代码1 <div id="root"> <h1>hello {{msg}}</h1> &l ...
- Vue学习之todolist删除功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习之todolist组件拆分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- vue第十三单元(指令的作用，指令的钩子函数)
第十三单元(指令的作用,指令的钩子函数) #课程目标 1.了解自定义指令的应用场景 2.掌握自定义全局和局部指令 3.掌握指令的钩子函数 #知识点 #一.认识自定义指令 除了核心功能默认内置的指令 ( ...
- vue第一单元(初识webpack-webpack的功能-webpack的初步使用)
第一单元(初识webpack-webpack的功能-webpack的初步使用) #课程目标 了解webpack出现的意义,以及webpack解决的前端问题 掌握webpack的使用流程和步骤 掌握we ...
- 2020年下征文+没有计算机经验的宝妈也可以轻松领证一次过关啦 nice ！相信努力总会收获
2020年下征文+没有计算机经验的宝妈也可以轻松领证http://www.1634.com.cn/ruankao/forum.php?mod=viewthread&tid=5363&f ...
- Web服务器-服务器开发-返回浏览器需要的页面 （3.3.2）
@ 目录 1.说明 2.代码 关于作者 1.说明 使用正则表达式,匹配客户端的请求头 获取到请求的路径 返回对应请求路径的文字 可以使用打开对应文件的方式去返回对应的文件 2.代码 from sock ...
- 任务队列--nodejs
很多项目可能都会涉及到任务队列来进行任务处理和维护的,那么需要使用到redis或者第三方库(使用redis)来实现任务队列,甚至需要控制并发量,但是对于saas部署来说使用redis可能会比较麻烦和成 ...
- Python实现多个pdf文件合并
背景 由于工作原因,经常需要将多个pdf文件合并后打印,有时候上网找免费合并工具比较麻烦(公司内网不能访问公网),于是决定搞个小工具. 具体实现 需要安装 PyPDF2 pip install PyP ...
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- CentOS7 实战源码部署nginx网站服务器
简介:实战演练nginx网站服务器的搭建 nginx 简介: Nginx是一款高性能的 HTTP 和反向代理服务器 Nginx的优点: 1.高并发量:根据官方给出的数据,能够支持高达 50,000 ...
- 读取pdf中的内容
import com.spire.pdf.PdfDocument;import com.spire.pdf.PdfPageBase;import java.io.*; public class Ext ...
- Echarts数据可视化，easyshu图表集成。
介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...