基于Vue框架实现的记事本

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>懒人记事本</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 20px;background-color: #f5f5f5;}#APP {max-width: 600px;margin: 0 auto;background-color: #fff;padding: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}h2 {margin-top: 0;color: #333;}table {width: 100%;border-collapse: collapse;}th, td {padding: 8px;text-align: left;border-bottom: 1px solid #ddd;}th {background-color: #f9f9f9;}input[type="text"] {padding: 5px;width: 200px;}button {padding: 5px 10px;background-color: #4CAF50;color: white;border: none;cursor: pointer;}button:hover {background-color: #45a049;}tbody tr:nth-child(odd) {background-color: #f2f2f2;}.hover-content {display: none; /* 初始状态隐藏 */}tr:hover .hover-content {display: block;
}</style>
</head>
<body><div id="APP"><h2>懒人记事本</h2><table><header><tr><th><input type="text" placeholder="请输入任务名" v-model="rwname"></th><th><button @click="add">添加任务</button></th></tr></header><tbody><tr v-for="(item,index) in list" :key="item.id"><td>{{index+1}}.{{item.name}}</td><td><button class="hover-content" @click="del(item.id)">X</button></td></tr><tr v-show="list.length>0"><td><span>统计:{{list.length}}</span></td><td><button @click="list=[]">清空</button></td></tr></tbody></table></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const APP = new Vue({el:'#APP',data:{rwname:'',list:[{id:1,name:'打篮球'},{id:2,name:'做作业'},{id:3,name:'玩游戏'}]},methods:{add(){this.list.unshift({id:+new Date,name:this.rwname});this.rwname=''},del(x){this.list=this.list.filter(item=>item.id!=x)}}})</script></body>
</html>

实现页面如下图:

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

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

相关文章

深度网络现代实践 - 深度前馈网络之反向传播和其他的微分算法篇

序言 反向传播&#xff08;Backpropagation&#xff0c;简称backprop&#xff09;是神经网络训练过程中最关键的技术之一&#xff0c;尤其在多层神经网络中广泛应用。它是一种与优化方法&#xff08;如梯度下降法&#xff09;结合使用的算法&#xff0c;用于计算网络中各参数的…

大数据面试题之数仓(1)

目录 介绍下数据仓库 数仓的基本原理 数仓架构 数据仓库分层(层级划分)&#xff0c;每层做什么?分层的好处? 数据分层是根据什么? 数仓分层的原则与思路 知道数仓建模常用模型吗?区别、优缺点? 星型模型和雪花模型的区别?应用场景?优劣对比 数仓建模有哪些方式…

【Symfony社区全接触】深入探索文档与支持资源

标题&#xff1a;【Symfony社区全接触】深入探索文档与支持资源 Symfony是一个强大的PHP框架&#xff0c;拥有一个活跃的开发者社区和丰富的文档资源。这些资源对于学习和使用Symfony至关重要。本文将详细介绍Symfony的文档和社区支持&#xff0c;包括官方文档、社区论坛、邮件…

如何计算弧线弹道的落地位置

1&#xff09;如何计算弧线弹道的落地位置 2&#xff09;Unity 2021 IL2CPP下使用Protobuf-net序列化报异常 3&#xff09;编译问题&#xff0c;用Mono可以&#xff0c;但用IL2CPP就报错 4&#xff09;Wwise的Bank在安卓上LoadBank之后&#xff0c;播放没有声音 这是第393篇UWA…

02 数据加工层 如何搭建用户与内容的标准规范体系

你好&#xff0c;我是周大壮。 01 讲我们提到了个性化流量分发体系的四个阶段&#xff0c;并着重讲解了数据采集阶段的内容。那么&#xff0c;这一讲我们主要围绕数据加工阶段的内容进行详细讲解。 在课程开始之前&#xff0c;我们先举一个场景进行说明。 近年来&#xff0c…

静态方法与实例方法的区别

静态方法与实例方法的区别 1、静态方法&#xff08;Static Methods&#xff09;1.1 调用方式1.2 访问权限 2、实例方法&#xff08;Instance Methods&#xff09;2.1 调用方式2.2 访问权限 3、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1…

大数据面试题之数仓(2)

目录 维度表和事实表的区别? 什么是ER模型? OLAP、OLTP解释(区别)三范式是什么&#xff0c;举些例子 维度设计过程&#xff0c;事实设计过程 维度设计中有整合和拆分&#xff0c;有哪些方法&#xff0c;并详细说明 事实表设计分几种&#xff0c;每一种都是如何在业…

【C++】解决 C++ 语言报错:Invalid Array Index

文章目录 引言 无效数组索引&#xff08;Invalid Array Index&#xff09;是 C 编程中常见且危险的错误之一。当程序试图使用不合法的索引访问数组时&#xff0c;就会发生无效数组索引错误。这种错误不仅会导致程序崩溃&#xff0c;还可能引发不可预测的行为和安全漏洞。本文将…

【PB案例学习笔记】-28制作一个右键菜单

写在前面 这是PB案例学习笔记系列文章的第28篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…

任天堂称未来第一方游戏不会使用生成式AI

虽然EA、育碧、暴雪、Embracer等西方游戏厂商都大力支持生成式AI技术&#xff0c;但日本老牌游戏公司任天堂并不会追随这一步伐。任天堂已经确认该公司未来的第一方游戏不会使用生成式AI技术。 在公司最近的投资人问答会上&#xff0c;任天堂描绘了公司未来游戏愿景。在谈到AI技…

安徽农业大学学报

《安徽农业大学学报》是安徽农业大学主办&#xff0c;国内外公开发行的综合性农业科学类学术期刊&#xff0c;主要刊登茶叶科学、动植物遗传育种、作物栽培、植物保护、林学、动物科学与动物医学、水产科学、生物学、土壤学、农业生态与环境科学、园艺学、食品科学、农业机械工…

Oracle PL / SQL变量值

常量 要声明常量&#xff0c;请在类型说明符之前放入关键字CONSTANT。 常量必须在其声明中初始化。 每次输入块或子程序时&#xff0c;都会初始化常量。 以下代码显示如何定义REAL类型的常量&#xff0c;并为常量指定一个不可更改的值5。 DECLARE n_real CONSTANT RE…

51单片机第27步_单片机工作在睡眠模式

重点学习51单片机工作在睡眠模式。 1、进入“睡眠模式”的方法 通过将PCON寄存器中的PDWN置1&#xff0c;则CPU会进入“睡眠模式”。在“睡眠模式”中,晶振将停止工作&#xff0c;因此&#xff0c;定时器和串口都将停止工作&#xff0c;只有外部中断继续工作。如果单片机电源…

LeetCode——第 404 场周赛

周赛 三角形的最大高度 给你两个整数 red 和 blue&#xff0c;分别表示红色球和蓝色球的数量。你需要使用这些球来组成一个三角形&#xff0c;满足第 1 行有 1 个球&#xff0c;第 2 行有 2 个球&#xff0c;第 3 行有 3 个球&#xff0c;依此类推。 每一行的球必须是 相同 …

Go语言--自定义函数

定义格式 函数构成代码执行的逻辑结构。在 Go语言中&#xff0c;兩数的基本组成为:关键字 func、函数名、参数列表、返回值、所数体和返回语句。 函数定义说明: func:函数由关键字func开始声明FuncName:函数名称&#xff0c;根据约定&#xff0c;数名首字母小写即为private…

浅谈 Linux 中的 core dump 分析方法

文章目录 一、什么是 core dump二、发生 core dump 的原因1. 空指针或非法指针引起 core dump2. 数组越界或指针越界引起的 core dump3. 数据竞争导致 core dump4. 代码不规范 三、core dump 分析方法1. 启用 core dump2. 触发 core dump2-1. 因空指针解引用而崩溃2-2. 通过 SI…

图形编辑器基于Paper.js教程06:鼠标画圆与椭圆

绘制椭圆与圆形&#xff1a;利用Paper.js进行交互式图形设计 在Web应用中实现交互式图形绘制功能&#xff0c;对于提高用户体验至关重要&#xff0c;尤其是在设计和艺术相关的应用中。Paper.js是一款强大的JavaScript库&#xff0c;专门用于处理矢量图形&#xff0c;它提供了一…

智能语音门锁:置入NV170D语音芯片ic 打造便捷生活新体验

一、智能门锁语音芯片开发背景 随着科技的飞速发展&#xff0c;传统门锁的局限性日益凸显&#xff0c;无法满足现代人对高效、安全生活的需求。在这样的时代背景下&#xff0c;智能门锁应运而生&#xff0c;它不仅继承了传统门锁的基本功能&#xff0c;更通过融入先进的科技元素…

商标的近似分辩,商标起名称时注意!

曾有过网友发来商标名称&#xff0c;普推知商标老杨说有近似&#xff0c;然后网友起过新名称还是存有近似&#xff0c;或者加字&#xff0c;后面加的通用词&#xff0c;与先有商标名称也是近似。 “良信健康”这个名称健康是行业通用词&#xff0c;加成健康后变成四个字&#x…

出现 images and labels...0 found, xx missing, 0 empty, 0 corrupt 解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 训练VOC的数据的时候出现如下问题: val: Scanning /home/l228/huoyanhao/yolov5/datasets/VOC/images/VOCdevkit/VOC2007/2007_val images and labels...0 found, 2510 missing, 0 empty, 0 corrupt: 100%|███████…