【IMWeb训练营作业】Todo List制作

一、效果图

1、初始状态


2、添加信息:完成与未完成任务比对


3、显示所有任务


4、显示未完成任务


5、显示已完成任务


二、核心代码

1、页面部分

        
   
   

任务计划列表

添加任务:

{{noCheckeLength}}个任务未完成

任务列表:

未添加任务

2、JS部分

			var store = {
				save(key, value) {
					localStorage.setItem(key, JSON.stringify(value));
				},
				fetch(key) {
					return JSON.parse(localStorage.getItem(key)) || [];
				}
			}
			var list = store.fetch("vue");
			var filter = {
				all: function(list) {
					return list;
				},
				finished: function(list) {
					return list.filter(function(item) {
						return item.isChecked;
					})
				},
				unfinished: function() {
					return list.filter(function(item) {
						return !item.isChecked;
					})
				}
			}
			var vm = new Vue({
				el: ".container",
				data: {
					list: list,
					todo: "",
					edtorTodos: '',
					beforeTitle: '',
					visibility: "all"
				},
				watch: {
					list: {
						handler: function() {
							store.save("miaov-new-class", this.list);
						},
						deep: true
					}
				},
				computed: {
					noCheckeLength: function() {
						return this.list.filter(function(item) {
							return !item.isChecked
						}).length
					},
					filteredList: function() {
						return filter[this.visibility] ? filter[this.visibility](list) : list;
					}
				},
				methods: {
					addTodo() {
						this.list.push({
							title: this.todo,
							isChecked: false
						});
						this.todo = '';
					},
					deleteTodo(todo) {
						var index = this.list.indexOf(todo);
						this.list.splice(index, 1);
					},
					edtorTodo(todo) {
						console.log(todo);
						this.beforeTitle = todo.title;
						this.edtorTodos = todo;
					},
					edtorTodoed(todo) {
						this.edtorTodos = '';
					},
					cancelTodo(todo) {
						todo.title = this.beforeTitle;
						this.beforeTitle = '';
						this.edtorTodos = '';
					}
				},
				directives: {
					"focus": {
						update(el, binding) {
							if(binding.value) {
								el.focus();
							}
						}
					}
				}
			});

			function watchHashChange() {
				var hash = window.location.hash.slice(1);
				vm.visibility = hash;
			}
			watchHashChange();
			window.addEventListener("hashchange", watchHashChange);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
城市应急指挥系统是智慧城市建设的重要组成部分,旨在提高城市对突发事件的预防和处置能力。系统背景源于自然灾害和事故灾难频发,如汶川地震和日本大地震等,这些事件造成了巨大的人员伤亡和财产损失。随着城市化进程的加快,应急信息化建设面临信息资源分散、管理标准不统一等问题,需要通过统筹管理和技术创新来解决。 系统的设计思路是通过先进的技术手段,如物联网、射频识别、卫星定位等,构建一个具有强大信息感知和通信能力的网络和平台。这将促进不同部门和层次之间的信息共享、交流和整合,提高城市资源的利用效率,满足城市对各种信息的获取和使用需求。在“十二五”期间,应急信息化工作将依托这些技术,实现动态监控、风险管理、预警以及统一指挥调度。 应急指挥系统的建设目标是实现快速有效的应对各种突发事件,保障人民生命财产安全,减少社会危害和经济损失。系统将包括预测预警、模拟演练、辅助决策、态势分析等功能,以及应急值守、预案管理、GIS应用等基本应用。此外,还包括支撑平台的建设,如接警中心、视频会议、统一通信等基础设施。 系统的实施将涉及到应急网络建设、应急指挥、视频监控、卫星通信等多个方面。通过高度集成的系统,建立统一的信息接收和处理平台,实现多渠道接入和融合指挥调度。此外,还包括应急指挥中心基础平台建设、固定和移动应急指挥通信系统建设,以及应急队伍建设,确保能够迅速响应并有效处置各类突发事件。 项目的意义在于,它不仅是提升灾害监测预报水平和预警能力的重要科技支撑,也是实现预防和减轻重大灾害和事故损失的关键。通过实施城市应急指挥系统,可以加强社会管理和公共服务,构建和谐社会,为打造平安城市提供坚实的基础。
在Node.js中,你可以使用内置的crypto模块来实现HMAC-SHA256算法。下面是一个示例代码: ```javascript const crypto = require('crypto'); const secret = 'Secret_Key'; const message = 'timestampGET/users/self/verify'; const hmac = crypto.createHmac('sha256', secret); hmac.update(message); const sign = hmac.digest('base64'); console.log(sign); ``` 在这个示例中,我们首先引入了crypto模块。然后,我们定义了密钥(secret)和要加密的消息(message)。接下来,我们使用createHmac方法创建了一个HMAC对象,并指定了算法为SHA256,并传入密钥。然后,我们使用update方法将消息传入HMAC对象进行更新。最后,我们使用digest方法以base64编码格式输出加密后的签名。 请注意,这个示例中的密钥和消息只是示意用法,你需要根据实际情况替换为你自己的密钥和消息。 #### 引用[.reference_title] - *1* [Typescript/Nodejs 使用HmacSHA256 & Base64对接口调用签名](https://blog.csdn.net/HumorChen99/article/details/117548951)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v4^insert_chatgpt"}} ] [.reference_item] - *2* [Hmac SHA256 加密在原生 Java 及 Node.js 的实现](https://blog.csdn.net/frgod/article/details/122025192)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v4^insert_chatgpt"}} ] [.reference_item] - *3* [腾讯IMWeb团队是如何使用 NodeJS 实现 JWT 原理](https://blog.csdn.net/lunahaijiao/article/details/109881868)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v4^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值