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

VUE简易计划清单

news 2026/1/28 9:26:30

目录

效果预览图

完整代码 

效果预览图

完整代码 

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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/1/24 22:23:37

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/1/26 14:22:31

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/11/22 20:41:02

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/18 16:41:56

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2026/1/26 12:37:40

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/1/19 4:34:59

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

编程新知 2026/1/20 23:45:39