vue 小黑记事本

最新推荐文章于 2024-03-13 17:11:37 发布
最新推荐文章于 2024-03-13 17:11:37 发布
阅读量135 收藏
点赞数
分类专栏： web_html 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wowocpp/article/details/132597720
版权

vue 小黑记事本

下面这个界面用html和css 如何搞出来？
在这里插入图片描述

wowocpp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue小黑记事本案例
qq_51501183的博客
09-22 521
1.小黑记事本效果图 2.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小黑记事本</title> <style> *{ margin: 0 ; padding: 0; background-color: white; } .todo{ background-...
vue案例小黑记事本详解
Im_xiaopei的博客
10-04 2297
大家好，今天学的东西不是很多，但遇到了一个特别有趣的vue小案例吧，我觉得可以拿出来给大家伙练练手，虽然案例简单，并不复杂，但也算是涵盖了vue大部分的常用知识点，希望大家可以多练练，有助于vue的学习。 正题开始。。。 案例叫做小黑记事本，大致长这个样子 大致功能是这个样子的， 1.在输入框中输入内容，点击回车，会将输入的内容按顺序放入下面的列表中， 2.再放入的过程中会自动统计记录的数量，显示在左下角 3.当鼠标点击对应的列表...
Vue小黑记事本
X_188773的博客
06-22 725
v-model数据双向绑定v-for生成列表结构，和数据绑定，响应式v-on绑定事件、事件修饰符 . 使用点v-show频繁切换显示 displayv-if移除（隐藏）添加回来（显示）
vue小黑记事本
往事如烟~~的博客
06-28 258
<template> <div class="home"> <h1>小黑记事本</h1> <input class="el-input" type="text" v-model="input" placeholder="请输入内容" @keyup.enter="add"> <ul class="L0"> <li v-for="(item,index) in title" :key="index">
vue小黑记事本源码
最新发布
qq_63529194的博客
03-13 435
【代码】vue小黑记事本源码。
前端 vue源码-小黑记事本.rar
07-22
在这个“小黑记事本”的项目中，我们看到作者运用了Vue的核心概念来创建一个简单的应用，这对我们深入理解Vue的使用和源码有很大帮助。 首先，让我们来看看Vue中的核心概念： 1. **数据绑定（Data Binding）**：...
小黑记事本（网页）
Yous的博客
06-03 725
项目： 提示：关于vue的学习实例，是一个小例子，顺便学一下里边的css记录一下： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessa
黑马程序员VUE学习笔记-小黑记事本案例
YuKing_HONG的博客
03-16 2342
自己写的样式，有很多不足，敬请见谅和指正。 CSS部分 * { padding: 0; margin: 0; } #todoapp { width: 300px; margin: 200px auto; } .biaoti { font:normal 200 34px '微软雅黑' ; color: rgb(219, 82, 82); text-align: center; padding-bottom:20px ; } .ne.
flask 网页 javascript 按钮 点击事件
abc
11-14 9345
代码: #!/usr/bin/env python # -*- coding: utf-8 -*- from flask import Flask from flask import Flask from flask import render_template from flask import request from flask import redirect from flask im...
postman使用
abc
02-16 7025
postman使用 http://httpbin.org/post http://httpbin.org/post http://httpbin.org/post?data=1222&name=2222&password=3333
红米手机 导出 通讯录 到电脑保存
abc
09-27 4376
此电脑\Redmi Note 5\内部存储设备\MIUI\backup\AllBackup\20230927_043337。手机 设置 ---- 更多设置 ----- 备份与恢复 ----- 手机 备份 恢复 ----- 手机 备份。如何将 bak文件 转换成txt文件？用 usb 线 连接 手机 和 电脑。选择 短信 联系人和通话记录。不要安装什么 手机助手。会出现下面的 一个 盘。-------立即备份。不要安装 什么app。
mongoose Web服务器 嵌入式 web服务器
abc
04-27 2879
mongoose Web服务器 Mongoose - Embedded Web Server 参考链接 https://github.com/cesanta/mongoose/tree/master/examples https://github.com/cesanta/mongoose Download Mongoose Source Code here Ask questions on support forum Read User Guide and API reference Study mong
Win7 下安装及使用NVM node.js
abc
12-15 2467
参考文档： 环境： win7 64位 参考博客 nvm安装与使用nvm下载不同版本nodejs https://blog.csdn.net/seu_lxy/article/details/94635659 https://blog.csdn.net/gaoqiang1112/article/details/80898134 node管理工具 nvm 下载安装和使用 node 配置全局环境 http...
chrome 浏览器远程控制与调试（一）
abc
09-27 2354
chrome 浏览器远程控制与调试（一） 远程调试启动： chromium-browser --remote-debugging-port=9222 --user-data-dir='~/code/chrome-test' 命令： http://localhost:9222/json/protocol #获取协议 http://localhost:9222/json/version #获取版本 http://localhost:9222/json/list #或者 http://localhost:92
导出视频里的字幕
abc
10-05 2199
如何快速提取视频中的字幕？给大家介绍一种简单高效又免费的提取方法。如何利用剪映快速提取并导出视频里的字幕。其他的不选中 点击字幕导出，txt，
mongoose 嵌入式 web服务器
abc
04-27 2013
Mongoose是一个web服务器，  通过提供一个web接口给它，  它可以嵌入到现有的应用程序中去。   Mongooseweb服务器的执行是自满足的，它不依赖于任何其他服务。  如果你将它复制到任何目录并执行，  它将将启动web服务并将当前目录作为主目录、端口号是8080。 mongoose的源码地址：https://github.com/cesanta/mongoose mongoose的用户手册：https://www.cesanta.com/developer/mongoose
django settings目录 生产环境和 开发环境分开
abc
12-23 1658
参考 多环境下，配置django settings https://www.jianshu.com/p/ae85eac23f46 django settings多环境配置 https://www.cnblogs.com/dannyyao/p/10345905.html 【Django】项目开发准备之settings目录文件的创建配置 https://blog.csdn.net/mydistance...
mysql ubuntu 应用记录 --- Head First SQL (六)
abc
11-22 1088
mysql ubuntu 应用记录 — Head First SQL (六) mysql -u root -p USE gregs_list; # Dump of table movie_table # ------------------------------------------------------------ CREATE TABLE `movie_table` ( `movi...
linux arm 嵌入式webserver 项目案例
abc
04-30 1066
linux arm 嵌入式webserver 项目案例 ihf3 CC = $(CROSS_COMPILE)gcc CFLAGS += -std=gnu99 -Wall -ljpeg -lappweb appweb.conf # # appweb.conf - Appweb configuration for the simple server sample # ErrorLog "stdout" level=2 #ErrorLog "error.log" size=10MB level=2 back
小黑记事本vue源代码
10-02
小黑记事本是一个使用Vue框架编写的项目，实现了简易的记事本功能。下面是部分小黑记事本的Vue源代码： 模板部分： ```html <template> <div class="notebook"> <h1>小黑记事本</h1> <div class="input-container"> <textarea v-model="content" placeholder="开始编写"></textarea> </div> <div class="button-container"> <button @click="saveNote">保存</button> <button @click="clearNote">清空</button> </div> <div class="notes-container"> <h2>已保存的笔记</h2> <ul> <li v-for="(note, index) in notes" :key="index">{{ note }}</li> </ul> </div> </div> </template> ``` 脚本部分： ```javascript <script> export default { data() { return { content: '', notes: [], }; }, methods: { saveNote() { if (this.content.trim() !== '') { this.notes.push(this.content.trim()); this.content = ''; } }, clearNote() { this.content = ''; }, }, }; </script> ``` 样式部分： ```css <style scoped> .notebook { text-align: center; margin: 20px auto; } .input-container { margin-bottom: 20px; } textarea { width: 300px; height: 150px; } .button-container button { margin: 0 10px; } .notes-container { margin-top: 30px; } ul { list-style-type: none; padding-left: 0; } li { margin-top: 10px; } </style> ``` 以上是小黑记事本的一个简化版本，实现了输入内容的保存和清空，并将已保存的笔记展示在界面上。用户可以在文本框中输入内容，点击保存按钮即可将内容添加到已保存的笔记列表中。点击清空按钮可以清空文本框中的内容。小黑记事本提供了简单的界面交互，方便用户保存和管理笔记。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值