当前位置： 首页 > news >正文

VUE简易计划清单

news 2026/2/9 6:10:39

目录

效果预览图

完整代码 

效果预览图

完整代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>作业</title><style>*{margin: 0;padding: 0;}#app{width: 600px;height: 800px;background: #ccc;margin: 50px auto;padding: 20px;}#app>input{width: 450px;height: 50px;border: none;margin: 30px;}#app>button{width: 80px;height: 50px;border: none;background: #9ddeec;}h3{margin-left: 30px;}ul{list-style-type: none;height: 300px;overflow: auto;margin-top: 10px;}.t{width: 530px;margin: 0 auto;height: 40px;margin-top: 10px;background: #fff;border-radius: 5px;display: flex;align-items: center;justify-content: space-around;position: relative;}li{position: relative;}span{display: inline-block;width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}#app>ul>li>button{height: 30px;width: 60px;border: none;cursor: pointer;}var{font-size: 12px;color: #ccc;}#app .ck{width: 530px;height: 100px;margin: 0 auto;display: none;background: #fff;z-index: 100;position: relative;overflow: auto;}.kk{white-space: wrap;}.ck button{width: 30px;height: 30px;border: none;position: absolute;right: 3px;bottom: 3px;cursor: pointer;}li .m{border: none;background: #8cbde5;width: 60px;height: 30px;border-radius: 5px;color: #fff;}.hc{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.3);border-radius: 5px;}</style>
</head>
<body><div id="app"><input type="text" v-model="val"><button @click="add">添加</button><h3>待完成事项</h3><ul><li v-for="(item,index) in arr"><div class="t"><input type="checkbox" v-model="item.bol" @change="xz(index)"><span>{{arr[index].name}}</span> <var>{{arr[index].time}}</var><button class="m" @click="sc(index)">删除</button><button class="m" @click="ck(index)">查看详情</button> </div><div :style="{display:n == index ?'block':'none'}" class="ck"><p class="kk">{{arr[index].name}}</p> <button @click="sq">收起</button></div></li></ul><h3>已完成事项</h3><ul><li v-for="(item,index) in arr2"><div class="t"><input type="checkbox" v-model="item.bol" @change="xz(index)"><span>{{arr2[index].name}}</span> <var>{{arr2[index].time}}</var><div class="hc" @click="bb"></div></li></ul></div>
</body>
</html>
<script type="module">import {createApp} from './js/vue.esm-browser.js'createApp({data() {return {arr:[{name:'早上:早起背面试题',time:'2023/11/22 18:36:00',bol:false},{name:'上午:学习',time:'2023/11/22 18:06:00',bol:false},{name:'中午:午休',time:'2023/11/22 17:35:00',bol:false},{name:'晚上:复习',time:'2023/11/22 14:36:00',bol:false},],arr2:[],val:'',n:-1,num:0,fl:1,}},methods: {sc(index){let userResponse = window.confirm("确定要删除该计划吗？");if (userResponse) {this.arr.splice(index,1)} else {}},xz(index){let userResponse = window.confirm("确定已经完成了该计划吗");if (userResponse) {this.arr2.push(this.arr[index])this.arr.splice(index,1)console.log(this.arr2);} else {this.arr[index].bol = false}},add(){let nn = new Date().toLocaleString()console.log(this.val);if (this.val!='') {let obj={name:this.val,time:nn}this.arr.unshift(obj)this.val=''}else if (this.val=='') {alert('内容不能为空')}},ck(index){this.n = index;},sq(){this.n = -1},bb(){alert('已经确定完成的计划不能查看点击！')}},}).mount('#app')    
</script>

相关文章：

VUE简易计划清单

目录 效果预览图 完整代码 效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…...

编程日记 2023/11/26 23:29:58

c++日志单例实现

为了使项目的所有日志都打印到同一个日志中&#xff0c;必须使得所有类使用同一个日志&#xff0c;因此将日志类实现为单例。 .h文件 #pragma once#include<fstream>class LogHablee { private:LogHablee(std::string& dbg_dir);LogHablee(const LogHablee&) …...

编程日记 2023/11/26 23:28:57

C/C++实现：找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和 某知名企业笔试题

目录 题目描述： 示例 1： 示例 2： 示例 3： 提示： 思路：...

编程日记 2023/11/26 23:27:56

Qt实现绘制自定义形状

先创建一个继承自QWidget的控件&#xff1a; class MyPainterWidget:public QWidget 重写各种鼠标方法&#xff1a; protected:void paintEvent(QPaintEvent *) override;void mousePressEvent(QMouseEvent *e) override; //按下void mouseMoveEvent(QMouseEvent *e) …...

编程日记 2023/11/26 23:25:51

WordPress安装AWS插件实现文本转语音功能

适用于 WordPress 的 AWS 插件示例演示了内容创建者如何轻松地为所有书面内容添加文本转语音功能。随着语音搜索的不断增加&#xff0c;以音频格式提供更多网站内容变得至关重要。通过添加语音功能&#xff0c;网站访客可以通过在线音频播放器和播客应用程序等新渠道使用您的内…...

编程日记 2023/11/26 23:24:50

87-96-多维动态规划、技巧

LeetCode 热题 100 文章目录 LeetCode 热题 100多维动态规划87. 中等-不同路径88. 中等-最小路径和89. 中等-最长回文子串90. 中等-最长公共子序列91. 困难-编辑距离 技巧92. 简单-只出现一次的数字93. 简单-多数元素94. 中等-颜色分类95. 中等-下一个排列96. 中等-寻找重复数 …...

编程日记 2023/11/26 23:23:48

NX二次开发UF_CURVE_ask_wrap_curve_parents 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_wrap_curve_parents Defined in: uf_curve.h int UF_CURVE_ask_wrap_curve_parents(tag_t curve_tag, tag_t * defining_face, tag_t * defining_plane, tag_t * defin…...

编程日记 2023/11/26 23:21:46

使用 HTML、CSS 和 JavaScript 创建图像滑块

使用 HTML、CSS 和 JavaScript 创建轮播图 在本文中&#xff0c;我们将讨论如何使用 HTML、CSS 和 JavaScript 构建轮播图。我们将演示两种不同的创建滑块的方法&#xff0c;一种是基于opacity的滑块&#xff0c;另一种是基于transform的。 创建 HTML 我们首先从 HTML 代码开…...

编程日记 2023/11/26 23:19:44

ubuntu环境删除qtcreator方法

文章目录 方法1方法2方法3参考不同的安装方法，对应不同的删除方法 方法1 apt-get或者dpkg 方法2 QtCreatorUninstaller 方法3 MaintenanceTool...

编程日记 2023/11/26 23:18:44

软件测试基础知识

软件测试基本概念 1、软件程序文档&#xff0c;软件测试程序测试文档测试。 “程序”是指能够实现某种功能的指令的集合&#xff0c;“文档”是指软件在开发、使用和维护过程中产生的图文集合。&#xff1b; 2、软件的分类 按功能分&#xff1a;系统软件、应用软件 按技术架构分…...

编程日记 2023/11/26 23:17:42

使用 .toISOString() 方法生成当前时间的ISO格式字符串，解决UTC时区差问题

方法分析&#xff1a; 日常开发中&#xff0c;有时我们需要向后端传递的时间值可能并非一个时间对象&#xff0c;而是字符串格式。 例 1&#xff1a;[2023-08-16T08:07:25.577Z] 但是我们通过 new Date() 之后直接使用 .toString() 方法得到的却并非这种格式。 例 2&#xff1…...

编程日记 2023/11/26 23:16:41

“BMP转PNG一键转换，批量处理图片，迈入高效图片管理新时代“

你是否曾经为了转换图片格式而烦恼&#xff1f;是否曾经因为一张一张地手动转换而感到无奈&#xff1f;现在&#xff0c;我们的全新工具将为你解决这些问题&#xff0c;开启高效图片管理新时代&#xff01; 首先&#xff0c;我们进入首助编辑高手主页面&#xff0c;会看到有多种…...

编程日记 2023/11/26 23:15:40

解决Vue编程式导航路由跳转不显示目标路径问题

我们配置一个编程式导航的路由跳转&#xff0c;跳转到 /search 页面&#xff0c;并且携带categoryName和categoryId两个query参数。 this.$router.push({path: "/search",query: {categoryName: dataset.categoryname,categoryId: dataset.categoryid} }) 如果我们…...

编程日记 2023/11/26 23:14:39

Android studio 引用framework.jar

framework.jar 引用目录 N/O&#xff1a; out/target/common/obj/JAVA_LIBRARY/framework_interminate/classes.jarAndroid 9/10: out/soong/.intermediates/frameworks/base/framework/android_common/combined/framework.jarAndroid 11: out/soong/.intermediates/framewo…...

编程日记 2023/11/26 23:13:38

软著项目推荐 深度学习 python opencv 火焰检测识别 火灾检测

文章目录 0 前言1 基于YOLO的火焰检测与识别2 课题背景3 卷积神经网络3.1 卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV54.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 数据集准备5.1 数…...

编程日记 2023/11/26 23:11:35

宝塔面板安装搭建DiscuzQ论坛教程与小程序上架发布后的展示效果

DiscuzQ论坛小程序上架发布后的展示效果&#xff1a; 1、需要用到的环境&#xff1a; php7.2 mysql5.7或者MariaDB 10.2(我安装用的mysql8.0) php除了必要的一些扩展外&#xff0c;还需要启用readlink、symlink函数等&#xff0c;具体看官方说明&#xff0c;安装的时候也会提醒…...

编程日记 2023/11/26 23:09:34

交换机配置与管理

文档以国产迈普交换机为例&#xff0c;各厂家交换机配置有少许不同&#xff0c;仅供参考。 交换机命令行模式&#xff1a; 普通用户模式Hostname>&#xff08;&#xff09; exit 输入enable命令 特权用户模式Hostname#&#xff08;&#xff09; exit 输入configu…...

编程日记 2023/11/26 23:08:33

python每日一题——7接雨水

题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表…...

编程日记 2023/11/26 23:07:33

Ubuntu20安装ssh服务

Ubuntu20上执行如下命令查看是否存在ssh服务 #ps -e | grep ssh 只有ssh-agent&#xff0c;没有sshd; 因此要安装openssh-server. 搜索openssh-server,得到下载链接&#xff1a; openssh-server 复制这个Binary Package链接即可下载&#xff0c;然后使用如下命令安装 sudo…...

编程日记 2023/11/26 23:06:31

linux LVM /dev/sdb mount dir /data【linux LVM 磁盘挂载目录】

添加磁盘 /dev/sdb rootregistry01 ~]# fdisk -lDisk /dev/sda: 53.7 GB, 53687091200 bytes, 104857600 sectors Units sectors of 1 * 512 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/O size (minimum/optimal): 512 bytes / 512 bytes Disk lab…...

编程日记 2023/11/26 23:05:30

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2026/2/8 20:41:53

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/1/27 17:31:07

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2026/1/28 9:44:45

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/10/31 21:11:39