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 ...
随机推荐
- Spark-3-调优要点
1 内存调整要点 Memory Tuning,Java对象会占用原始数据2~5倍甚至更多的空间.最好的检测对象内存消耗的办法就是创建RDD,然后放到cache里面去,然后在UI上面看storage的变 ...
- Yii2 给表添加字段后报错 Getting unknown property
手动在数据库中添加了image字段 然后再模型类Image中的 rule方法也将image的验证规则放进去了 但是在 $model = new Image 后,使用$model->iamge 还 ...
- Thymeleaf是个什么东东？
Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本. Thymeleaf的主要目标是提供一个优雅和高度可维护的创建 ...
- Python中的”黑魔法“与”骚操作“
本文主要介绍Python的高级特性:列表推导式.迭代器和生成器,是面试中经常会被问到的特性.因为生成器实现了迭代器协议,可由列表推导式来生成,所有,这三个概念作为一章来介绍,是最便于大家理解的,现在看 ...
- js深克隆与浅克隆
定义: 浅克隆: 克隆对象的一层属性, 如果对象还有对象的话,里面的对象没有进行克隆,只是把地址给了别人.也可以理解为只是简单的克隆了躯体,但是没有得到其灵魂: 深克隆:克隆对象的多层属性,对象里面还 ...
- 利用xlutils第三方库复制excel模板
Python之利用第三方库套用excel模板,模板的样子假设如下: 现在要用这个模板,并且在"第二行第二列"的下方填入内容: #!usr/bin/python3 # -*-codi ...
- Error:(18) error: '#FFFF782' is incompatible with attribute android:endColor (attr) color. --Android
android studio 编译是报如下错误: Error:(18) error: '#FFFF782' is incompatible with attribute android:endCol ...
- CentOS7 实战部署tomcat网站服务器
简介:实战演练tomcat网站服务器的搭建 Tomcat:是一个开源免费的Web应用服务器,性能稳定,是目前比较流行的Web应用服务器 tomcat官网下载: https://tomcat.apa ...
- 这4种ThreadLocal你都知道吗？
什么是ThreadLocal ThreadLocal类顾名思义可以理解为线程本地变量.也就是说如果定义了一个ThreadLocal, 每个线程往这个ThreadLocal中读写是线程隔离,互相之间不会 ...
- Pytest测试框架（一）：pytest安装及用例执行
PyTest是基于Python的开源测试框架,语法简单易用,有大量的插件,功能非常多.自动检测测试用例,支持参数化,跳过特定用例,失败重试等功能. 安装 pip install -U pytest ...