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 ...
随机推荐
- Open SSH CVE-2020-15778
Open SSH OpenSSH 是用于使用 SSH 协议进行远程登录的一个开源实现.通过对交互的流量进行加密防止窃听,连接劫持以及其他攻击.OpenSSH 由 OpenBSD 项目的一些开发人员开发 ...
- 自学python，从小白到大神，需要多久?
2020年10月 TIOBE 排行榜超过了 Java, 历史上首次 Python 超越了 Java ,再次让许多朋友对 Python 产生了兴趣,今天我们来梳理下学习 Python 几个阶段或者级别, ...
- Java基础:String类详解,案例用户登录实现,案例手机号截取实现,案例敏感词替换实现;StringBuilder类详解,StringBuilder和String相互转换,附练习案例.
1.API 1.1 API概述-帮助文档的使用 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK ...
- python3参考秘籍-附PDF下载
目录 简介 Python的主要数据类型 Python中的String操作 基本操作 String连接 String复制 Math操作 内置函数 函数Function 传递参数 列表 添加元素 从lis ...
- nodejs+express+mongodb 快速接口开发
nodejs+mongodb+express API快速生成 使用说明 安装 $ npm install duzq-quick-mongo 建立mongodb数据模型 const mongoose = ...
- 在 xunit 测试项目中使用依赖注入
在 xunit 测试项目中使用依赖注入 Intro 之前写过几篇 xunit 依赖注入的文章,今天这篇文章将结合我在 .NET Conf 上的分享,更加系统的分享一下在测试中的应用案例. 之所以想分享 ...
- spring依赖注入的方式（一）
为了方便类的管理,spring提供了依赖注入的思想:类的实例化不由程序员控制,而是交给sprig容器进行管理. spring提供了多种类型的注入方式---注解.xml注入: 1 注解注入 有两种:@ ...
- Net Core（Net5） 部署到不同操作系统遇到问题的解决方法
Net Core(Net5) 部署到不同操作系统的解决方法 目录 Net Core(Net5) 部署到不同操作系统的解决方法 1 系统版本升级补丁 1.1应用程序部署时VC无法安装,导致应用程序缺少配 ...
- 使用Android Studio来阅读Android源码
在编译android系统后,执行下面命令来生成索引. mmm development/tools/idegen/mv ./out/target/product/tiny4412/obj/GYP/sha ...
- Spring Data JPA简介 Spring Data JPA特点
Spring Data JPA 是Spring基于ORM框架.JPA规范的基础上封装的一套JPA 应用框架,底层使用了Hibernate 的JPA技术实现,可使开发者用极简的代码即可实现对数据的访问和 ...