修改了vue3 <script setup>留言板

Лунная ночь
<template><button class="edit_view_checkbox"><input type="checkbox" v-model="editshowInput" value="编辑" /></button><div class="editshowInput" v-if="editshowInput"><div class="textarea_addItem"><textarea placeholder="请输入备注内容" v-model="newItem"></textarea><button @click="addItem">添加</button></div><button class="">完成 <input type="checkbox" v-model="finishshowInput" value="完成" /></button></div><div class="text"><div v-for="(item, index) in items" :key="index" :class="{ finish: item.finish }"><button @click="toggleFinish(index)" v-if="finishshowInput">{{ item.finish ? '取消' : '完成' }}</button><button @click="edit(index)" v-if="finishshowInput">修改</button><span v-show="oindex == index ? true : false" class="textarea_alter"><textarea v-model="newItem"></textarea><button @click="csu">提交</button></span><span class="content_text"><button class="IndexNumber">{{ index + 1 }}</button>{{ item.name }}{{ item.finish ? '(已完成)' : '' }}<button @click="removeItem(index)" v-if="finishshowInput" class="del_btn">删除</button></span></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'
const editshowInput = ref(false)
const finishshowInput = ref(false)const newItem = ref('')
const items = ref([])
const oindex = ref(-1)const addItem = () => {items.value.push({ name: newItem.value, finish: false })saveTodo()newItem.value = ''
}
const removeItem = (index) => {if (confirm('确定要删除所选?')) {items.value.splice(index, 1)saveTodo()}}
const edit = (index) => {if (newItem.value === '' || false) {newItem.value = items.value[index].nameoindex.value = index} else {newItem.value = ''oindex.value = -1}
}
const csu = () => {if (oindex.value === -1) {return}items.value[oindex.value].name = newItem.valueoindex.value = -1newItem.value = ''saveTodo()
}const toggleFinish = (index) => {items.value[index].finish = !items.value[index].finishsaveTodo()
}const saveTodo = () => {try {localStorage.setItem('jottings', JSON.stringify(items.value))} catch (error) {console.error('Failed to save todo items to localStorage:', error)// 可以添加适当的错误处理逻辑,比如向用户显示错误信息}
}const loadTodo = () => {try {const savedItems = JSON.parse(localStorage.getItem('jottings'))if (savedItems) {items.value = savedItems}} catch (error) {console.error('Failed to load todo items from localStorage:', error)// 可以添加适当的错误处理逻辑,比如向用户显示错误信息}
}onMounted(() => {loadTodo()
})
</script><style scoped>
.edit_view_checkbox {position: absolute;transform: translate(-130px, 110px);margin: 0px 10px;-webkit-appearance: none;appearance: none;width: 100px;height: 100px;border-radius: 50%;z-index: 1;background-color: #14475693;box-shadow:inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);border: 0px solid black;& :active {box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}input::after {content: '编辑';width: 100%;height: 100%;/* border: 2px solid #e9f504; */position: absolute;left: -3px;top: 12px;border-radius: 50%;font-size: 50px;color: #e9f504;}input:checked::after {height: 20%;
width: 40px;
border-top: none;
border-right: none;
border-radius: 0;
transform: rotate(-45deg);
transition: all 0.5s ease-in-out;
/* 行高 */
line-height: 50px;
}
}.editshowInput {display: flex;gap: 10px;.textarea_addItem {display: flex;}
}
.text {display: flex;flex-wrap: wrap;gap: 2px;.textarea_alter {display: flex;}.content_text {/* color: hsla(160, 100%, 37%, 1); */color: rgb(255, 255, 255);text-shadow: 1px 1px 1px #000;.IndexNumber {font-size: 25px;}.del_btn {margin-right: 30px;}}
}
.finish {text-decoration: line-through;box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.916);background-color: rgb(191, 210, 255);color: #ffffff;border-radius: 50px;text-shadow: 1px 1px 1px #030303;box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
</style>
图片背景:
body {// 设置背景图片// background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg);background: url('../assets/img/10.jpg') no-repeat center center fixed;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;/* background-position: center 70px; 垂直方向向下偏移80像素 */
}
相关文章:
修改了vue3 <script setup>留言板
Лунная ночь <template><button class"edit_view_checkbox"><input type"checkbox" v-model"editshowInput" value"编辑" /></button><div class"editshowInput" v-if"editshowI…...
jQuery 常用API
一、jQuery 选择器 1、jQuery 基础选择器 原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准 2、jQuery 层级选择器 3、隐式迭代 遍历内部 DOM 元素(伪数组形式存储&am…...
内网安全-隧道搭建穿透上线内网穿透-nps自定义上线内网渗透-Linux上线-cs上线Linux主机
目录 内网安全-隧道搭建&穿透上线内网穿透-nps-自定义-上线NPS工具介绍搭建过程 nps原理介绍MSF上线CS上线 内网渗透-Linux上线-cs上线Linux主机1.下载插件2.导入插件模块3.配置监听器4.服务端配置5.配置C2监听器并生成木马6.执行木马 内网安全-隧道搭建&穿透上线 内网…...
【AHK V2】设计模式之命令模式
目录 情景剧场什么是命令模式优缺点优点缺点 使用命令模式的步骤命令模式代码示例合理使用AI工具自动生成代码 情景剧场 我们来设想一个场景: 你进入一家餐馆,餐馆只有老板一个人(老板即厨师)。 “老板,一份小炒肉&am…...
2024年5月20日 (周二) 叶子游戏新闻
《边境之塔》登陆Steam 复古风恐怖生存冒险DascuMaru制作并发行,一款低像素3D复古风恐怖生存冒险新游《边境之塔(The Tower on the Borderland)》登陆Steam正式推出,限时九折优惠,本作暂不支持中文。 勇魅出击…...
【SQL学习进阶】从入门到高级应用(二)
文章目录 简单查询查一个字段查多个字段查所有字段查询时字段可参与数学运算查询时字段可起别名as关键字省略as关键字别名中有空格别名中有中文 🌈你好呀!我是 山顶风景独好 💝欢迎来到我的博客,很高兴能够在这里和您见面…...
FL Studio v21.2.3.4004中文破解版百度网盘下载
FL Studio v21.2.3.4004中文破解版是一款完整的软件音乐制作环境或数字音频工作站 (DAW)。代表了超过 18 年的创新发展,它在一个软件包中提供了您创作、编曲、录制、编辑、混音和掌握专业品质音乐所需的一切。FL Studio v21.2.3.4004中文破解版现在是世界上最受欢迎…...
从0开始写一个环境保护网站的第3天(JAVAWEB)
1.目标 实现首页的环境保护原因的查询,和底部友情连接部分 2.实现 2.1建立数据库表格(这里数据全是百度查询) 环境保护原因表: 友情连接表:(数据来源https://zhuanlan.zhihu.com/p/696243646࿰…...
Java中volatile关键字
保证了不同线程对这个变量进行操作时的可见性,即一个线程修改了某个变量的值,这新值对其他线程来说是立即可见的,volatile关键字会强制将修改的值立即写入主存。 1.volatile的可见性 一个典型的例子:永不停止的循环。 public class Forever…...
医院挂号就诊系统的设计与实现
前端使用Vue.js 后端使用SpiringBoot MyBatis 数据使用MySQL 需要项目和论文加企鹅:2583550535 医院挂号就诊系统的设计与实现_哔哩哔哩_bilibili 随着社会的发展,医疗资源分布不均,患者就诊难、排队时间长等问题日益突出,传统的…...
SpringBoot整合RabbitMQ的快速使用教程
目录 一、引入依赖 二、配置rabbitmq的连接信息等 1、生产者配置 2、消费者配置 三、设置消息转换器 四、生产者代码示例 1、配置交换机和队列信息 2、生产消息代码 五、消费者代码示例 1、消费层代码 2、业务层代码 在分布式系统中,消息队列是一种重要…...
pytorch比较操作
文章目录 常用的比较操作1.torch.allclose()2.torch.argsort()3.torch.eq()4.torch.equal()5.torch.greater_equal()6.torch.gt()7.torch.isclose()8.torch.isfinite()9.torch.isif()10.torch.isposinf()11.torch.isneginf()12.torch.isnan()13.torch.kthvalue()14.torch.less_…...
2024年4月—马克思主义基本原理概论真题及答案解析(上海自考)
目录 1.选择题 2.简答题 3.论述题 1.选择题 2.简答题...
「Element-UI表头添加带Icon的提示信息」
一、封装全局组件 🍓 注意:可以直接复制该文件 <!-- // 写一个PromptMessage的组件,并全局注册 --> <template><div class"tooltip"><el-tooltip effect"dark" placement"right">&l…...
单细胞 10X 和seurat对象学习
单细胞seurat数据的基础知识 rm(list ls()) library(Seurat) #注意这个报错 #Warning: Feature names cannot have underscores (_), replacing with dashes (-) folderslist.files(./,pattern[123]$) folders scList lapply(folders,function(folder){ CreateSeuratObject(…...
Flutter 中的 Flex 小部件:全面指南
Flutter 中的 Flex 小部件:全面指南 Flutter 的布局系统非常灵活,允许开发者以声明式的方式构建复杂的用户界面。Flex 是 Flutter 中用于创建灵活布局的核心小部件之一,它提供了水平和垂直的线性布局能力。本文将详细介绍 Flex 小部件的使用…...
统计每个活动的用户访问量,且每个用户仅统计一次
场景:统计每个活动的用户访问量,且每个用户仅统计一次。 首先活动表是已经存在了的,一般情况下,我们都会在创建一个用户访问表,其中唯一主键是用户ID活动ID作为唯一主键 create table user_visist_activity_record(i…...
基于SpringBoot的本科生考研率统计系统
基于SpringBoot的本科生考研率统计系统 一、开发技术二、功能模块三、代码结构四、数据库设计五、运行截图六、源码获取 一、开发技术 技术:SpringBoot、MyBatis-Plus、Redis、MySQL、Thymeleaf、Html、Vue、Element-ui。 框架:基于开源框架easy-admin开…...
JMeter正则表达式提取器和JSON提取器基础用法,小白必会!
最近在利用JMeter做接口自动化测试,正则表达式提取器和JSON提取器用的还挺多,想着分享下,希望对大家的接口自动化测试项目有所启发。 在 JMeter 中,正则表达式和 JSON 提取器都是用于从响应数据中提取所需内容,但它们…...
5-26作业
网络聊天室 服务器: 1 #include <myhead.h>2 int main(int argc, const char *argv[])3 {4 if(argc!3)5 {6 printf("请输入IP和端口号\n");7 return -1;8 }9 int sfd socket(AF_INET, SOCK_DGRAM, 0);10 if(…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
JS红宝书笔记 - 3.3 变量
要定义变量,可以使用var操作符,后跟变量名 ES实现变量初始化,因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符,可以创建一个全局变量 如果需要定义…...
FOPLP vs CoWoS
以下是 FOPLP(Fan-out panel-level packaging 扇出型面板级封装)与 CoWoS(Chip on Wafer on Substrate)两种先进封装技术的详细对比分析,涵盖技术原理、性能、成本、应用场景及市场趋势等维度: 一、技术原…...
