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 ...
随机推荐
- ASP.NET Core 中间件的使用（二）：依赖注入的使用
写在前面 上一篇大家已经粗略接触了解到.NET Core中间件的使用:ASP .Net Core 中间件的使用(一):搭建静态文件服务器/访问指定文件, .NET Core框架中很多核心对象都是通过依 ...
- linux里用户权限：~$,/$,~#,/#的区别与含义
$表明是非root用户登录,#表示是root用户登录,它们是终端shell的命令提示符几种常用终端的命令提示符 BASH: root账户: # ,非root账户: $KSH: root账户: # ...
- yii\filters\AccessControl 访问权限控制
Class yii\filters\AccessControl 所有类 | 属性 | 方法 继承 yii\filters\AccessControl » yii\base\ActionFilter ...
- 持久层之 MyBatis: 第二篇 ：动态SQL And多表查询
MyBatis入门到精通 完整CRUD UserDaoImpl 编写UserDao对应的UserDaoMapper.xml 添加UserDao的测试用例 编写UserDao的测试用例 解决数据库字段名 ...
- Python之格式化unix时间戳
就瞎倒腾,格式化时间: 1 import time 2 3 unixTime = time.time() #定义unixTime以存储系统当前的unix时间戳 4 print(unixTime); # ...
- RHCSA 复习
1.用户 # -->当前用户为root用户 $ -->当前用户为普通用户 [root@fafa ~]# su - 用户 ----切换用户 2.查看.修改主机名: ***保存在/etc/ ...
- [.NET] - 基础知识 - 如何debug一个.NET application
1.可以使用Debug/Trace类来将runtime信息输出到控制台窗口: https://msdn.microsoft.com/en-us/library/bs4c1wda.aspx https: ...
- 【老孟Flutter】2020年总结
2020年是我经历的最不平凡的一年,这一年有遗憾.有收获,有感概,也有庆幸,庆幸自己还活着. 用一句话总结自己的2020,忙并收获着,累并快乐着. <Flutter 实战入门> <F ...
- 读取pdf中的内容
import com.spire.pdf.PdfDocument;import com.spire.pdf.PdfPageBase;import java.io.*; public class Ext ...
- springMVC生成pdf文件
pom.xml文件配置=== <!-- https://mvnrepository.com/artifact/com.itextpdf/itextpdf --> <dependenc ...