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

VUE简易计划清单

news 2026/4/12 13:29:23

目录

效果预览图

完整代码 

效果预览图

完整代码 

<!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

搜索引擎Elasticsearch

Elasticsearch&#xff1a;大数据时代的智能搜索利器 在信息爆炸的今天&#xff0c;如何快速、精准地检索海量数据成为企业和开发者的核心需求。Elasticsearch作为一款开源的分布式搜索引擎&#xff0c;凭借其高性能、可扩展性和易用性&#xff0c;成为全球范围内广泛应用的搜…...

编程新知 2026/4/12 13:01:39

AIGlasses_for_navigation与AI Agent协同：构建自主决策的移动机器人

AIGlasses_for_navigation与AI Agent协同&#xff1a;构建自主决策的移动机器人 你有没有想过&#xff0c;让一个机器人像人一样&#xff0c;不仅能听懂“去A房间把桌上的水杯拿过来”这样的复杂指令&#xff0c;还能自己规划路线、避开障碍&#xff0c;最终完成任务&#xff…...

编程新知 2026/4/12 12:18:50

EmbeddingGemma-300m效果展示：Ollama实现专利技术趋势分析

EmbeddingGemma-300m效果展示&#xff1a;Ollama实现专利技术趋势分析 1. 当专利工程师遇上轻量级嵌入模型 专利文档的世界里&#xff0c;技术术语像密码一样密集排列。一份典型的通信领域专利摘要&#xff0c;可能同时出现“可重构智能表面”、“波束赋形算法”、“信道状态…...

编程新知 2026/4/12 12:14:44

006、轻量化改进（四）：神经架构搜索（NAS）与自动设计

一、从一次调试说起 上周在 Jetson Nano 上部署 YOLO 时遇到一个典型问题&#xff1a;模型推理时间达标了&#xff0c;但功耗始终压不下去。客户要求边缘设备连续工作 8 小时以上&#xff0c;现有的轻量化模型在功耗上还是“奢侈”了点。手动调整了通道数、改了两次激活函数&am…...

编程新知 2026/4/12 11:57:58

深入DDR5模式寄存器：从DFE均衡器到时序约束的底层原理剖析

深入DDR5模式寄存器&#xff1a;从DFE均衡器到时序约束的底层原理剖析 在高速内存技术领域&#xff0c;DDR5正以突破性的性能表现重新定义数据处理边界。当我们谈论DDR5的革新时&#xff0c;模式寄存器&#xff08;Mode Register&#xff09;作为内存子系统中的"神经中枢&…...

编程新知 2026/4/12 11:53:49

ConvNeXt 系列改进：添加门控通道变换（GCT），轻量化涨点（仅增加 0.1M 参数）

ConvNeXt 自从由 Meta AI（原 Facebook AI Research）提出以来，已经彻底改变了我们对纯卷积神经网络的认知。根据 ConvNeXt 官方文档，ConvNeXts 完全由标准 ConvNet 模块构建而成，在准确性和可扩展性方面与 Transformers 竞争，实现了 87.8% 的 ImageNet top-1 准确性，并在…...

编程新知 2026/4/12 10:55:16

终极虚拟控制器驱动：如何用ViGEmBus在5分钟内解决游戏兼容难题？

终极虚拟控制器驱动&#xff1a;如何用ViGEmBus在5分钟内解决游戏兼容难题&#xff1f; 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 你是否曾因为心爱的游…...

编程新知 2026/4/12 9:45:13

StructBERT情感分析在内容审核中的应用：短视频文案情绪风险分级

StructBERT情感分析在内容审核中的应用&#xff1a;短视频文案情绪风险分级 1. 项目概述与背景 短视频平台每天产生海量内容&#xff0c;其中文案的情绪倾向直接影响用户体验和平台安全。传统人工审核方式效率低下且成本高昂&#xff0c;急需智能化的情感分析解决方案。 Str…...

编程新知 2026/4/12 9:16:01

基于Xilinx的FPGA在线升级程序（仅7系列及以上支持）

基于xilinx的FPGA在线升级程序&#xff0c;仅7系列以上支持一、模块概述 本文档详细解读的decalperebotsdeenpotpidehcac_xnilix模块&#xff0c;是Xilinx 7系列FPGA&#xff08;具体型号xc7k325tffg900-2&#xff09;在线升级系统中的核心调试枢纽组件。该模块基于Vivado 2020…...

编程新知 2026/4/12 8:41:34

LeaguePrank终极指南：快速实现英雄联盟个性化数据展示

LeaguePrank终极指南&#xff1a;快速实现英雄联盟个性化数据展示 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 在英雄联盟的游戏世界里&#xff0c;每个召唤师都渴望展现独特的游戏身份和成就。LeaguePrank作为一款基于LCU…...

编程新知 2026/4/12 8:35:25