VUE简易计划清单

目录

效果预览图

完整代码 


效果预览图

完整代码 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Math Functions 数学函数

Math Functions 数学函数 Use the math functions that your database offers whenever possible. 尽可能使用数据库提供的数学函数。 Internally, PeopleCode assigns types to numeric values. Calculations for the Decimal type are processed in arrays to ensure dec…

基于YOLOv5的视频计数 — 汽车计数实现

在视频中计数对象可能看起来有挑战性&#xff0c;但借助Python和OpenCV的强大功能&#xff0c;变得令人意外地易于实现。在本文中&#xff0c;我们将探讨如何使用YOLO&#xff08;You Only Look Once&#xff09;目标检测模型在视频流或文件中计数对象。我们将该过程分解为简单…

带你用uniapp从零开发一个仿小米商场_9. 轮播图组件封装及使用

导航栏有了,接下来就是轮播图了,轮播图如下, 因为uniapp 官方自己有轮播图,所以这里就不自己写了,直接使用uniapp的轮播图二次开发就好 uniapp的轮播图组件叫swiper ,感兴趣的朋友可以点击链接,直接去看官方文档,也可以看我这里实操 用hbuilderX编译uniapp的代码有一个好处…

番外篇之通讯录

前言&#xff1a;用到的知识点有枚举、结构体、数组&#xff0c;快速排序&#xff08;用的名字排序&#xff09; 下面是测试函数&#xff1a; test.c #define _CRT_SECURE_NO_WARNINGS 1 #include"contact.h" void menu() {printf("*************************…

C语言之内存函数

C语言之内存函数 文章目录 C语言之内存函数1. memcpy 使⽤和模拟实现1.1 memcpy 函数的使用1.3 memcpy的模拟实现 2. memmove 使⽤和模拟实现2.1 memmove 函数的使用2.2 memmove的模拟实现 3. memset 函数的使用4. memcmp 函数的使⽤ 1. memcpy 使⽤和模拟实现 函数声明如下&a…

【LeetCode】14. 最长公共前缀

14. 最长公共前缀 难度&#xff1a;简单 题目 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 示例 1&#xff1a; 输入&#xff1a;strs ["flower","flow","flight"] 输出…

《已解决: ImportError: Keras requires TensorFlow 2.2 or higher 问题》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…

qt-C++笔记之不使用ui文件纯C++构建时控件在布局管理器作用下的默认位置和大小实践

qt-C笔记之不使用ui文件纯C构建时控件在布局管理器作用下的默认位置和大小实践 code review! 文章目录 qt-C笔记之不使用ui文件纯C构建时控件在布局管理器作用下的默认位置和大小实践1.ChatGPT解释2.ChatGPT——resize()和move()详解3.默认大小和位置——示例运行一4.默认大小…

乐观锁解决库存超卖问题

public BaseResult creatOneOrder(FlightOrderServiceImpl orderService, List<Map<String, String>> passengers,Map<String, String> selectFlightMap,String account) throws Exception {//如果是单程//判断座位数是否>1//是的话就直接减库存//不是就r…

excel表中慎用合并单元格,多用跨列居中

如下一个excel例表&#xff1a; 要将首行居中&#xff0c;最好的办法如下&#xff1a; 1、选中首行单元格 2、按下ctrl1&#xff0c;调出“设置单元格格式”&#xff0c;选中“对齐”&#xff0c;在“水平对齐”中选择“跨列居中” 3、完成任务 这样居中的好处是&#xff1a;可…

【NeRF】3、MobileR2L | 移动端实时的神经光场(CVPR2023)

论文&#xff1a;Real-Time Neural Light Field on Mobile Devices 代码&#xff1a;https://github.com/snap-research/MobileR2L 出处&#xff1a;CVPR2023 贡献&#xff1a; 设计了一套移动端实时的 R2L 网络结构 MobileR2L&#xff0c;在 iphone13 上渲染一张 1008x756…

RC-MVSNet:无监督的多视角立体视觉与神经渲染--论文笔记(2022年)

RC-MVSNet&#xff1a;无监督的多视角立体视觉与神经渲染--论文笔记&#xff08;2022年&#xff09; 摘要1 引言2 相关工作2.1 基于监督的MVS2.2 无监督和自监督MVS2.3 多视图神经渲染 3 实现方法3.1 无监督的MVS网络 Chang, D. et al. (2022). RC-MVSNet: Unsupervised Multi-…

帮管客CRM SQL注入漏洞复现

0x01 产品简介 帮管客CRM是一款集客户档案、销售记录、业务往来等功能于一体的客户管理系统。帮管客CRM客户管理系统&#xff0c;客户管理&#xff0c;从未如此简单&#xff0c;一个平台满足企业全方位的销售跟进、智能化服务管理、高效的沟通协同、图表化数据分析帮管客颠覆传…

【深度学习实验】图像处理(二):PIL 和 PyTorch(transforms)中的图像处理与随机图片增强

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入需要的工具包1. PIL图像处理a. 生成绿色和蓝色图像b. 缩放和合成图像c 在合成图像上添加文字d. 展示并保存图像 2. PIL随机图像增强a. 定义随机图像增强函数b. 实验结果展示 3. PyTorch&…

redis实现消息延迟队列

业务场景 在很多软件系统功能中都会出现定时任务的业务场景,比如提前点单,比如定时发布动态,文章等而出现这样的的定时的任务为延迟队任务 代码模块 任务的持久化一般都需要建立一个任务表和任务日志表,避免宕机导致任务失效,先新建立一个数据库,创建基本的任务表和任务日志表…

leetcode 打家劫舍

打家劫舍 (a) 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个…

CodeTON Round 7 (Div. 1 + Div. 2, Rated, Prizes!), E题 --- 题解

目录 题目大意&#xff1a; 思路解析&#xff1a; 代码&#xff1a; Problem - E - Codeforces 题目大意&#xff1a; 现在给你一个排列&#xff0c;排列的定义是如果排列长度为n&#xff0c;则他应该出现1-n的每个数字一次&#xff0c;但是顺序是无序的&#xff0c;现在问…

【MOJO】Modular语言安装和测试

目录 一、Mojo介绍 Linux​ Mac 二、安装Mojo SDK 三、mojo代码测试 3.1、在 REPL 中运行代码​ 3.2、构建并运行 Mojo 源文件​ 运行mojo文件​ 构建可执行二进制文件​ 四、VSCode安装 一、Mojo介绍 在学习Rust语言的过程中无意发现了Modular语言&#xff0c;语言…

Docker部署Nacos

此篇文章使用的nacos为2.2.1版本 拉取Nacos镜像 docker pull nacos/nacos-server:v2.2.1先将容器启动起来 docker run -d \ --name nacos \ -p 8848:8848 \ -p 9848:9848 \ -p 9849:9849 \ --privilegedtrue \ -e JVM_XMS256m \ -e JVM_XMX256m \ -e MODEstandalone \ -e NA…

nginx基础篇学习

一、nginx编译安装 1、前往nginx官网获取安装包 下载安装包 2、解压 3、安装 进入安装包 安装准备&#xff1a;nginx的rewrite module重写模块依赖于pcre、pcre-devel、zlib和zlib-devel库&#xff0c;要先安装这些库 安装&#xff1a; 编译&#xff1a; 启动&#xff…