小黑记事本-底部统计和清空

最新推荐文章于 2024-09-27 00:45:01 发布

软工的小白

最新推荐文章于 2024-09-27 00:45:01 发布

阅读量104

点赞数 3

文章标签： java 服务器前端

本文链接：https://blog.csdn.net/2301_80256000/article/details/142424301

版权

<footer class="footer">
            <span class="tode-count">合计：<strong>{{list.length}}</strong></span>

            <button @click="clear" class="clear-completed">
                清空任务
            </button>
        </footer>

clear(){
                    this.list={}
                }

v-show=“list.length>0”用于没有内容是，隐藏

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

软工的小白

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

07-Vue基础之综合案例——小黑记事本

weixin_46625500的博客

08-23

3371

案例小黑记事本

vue2-01-小黑记事本案例

m0_64150479的博客

05-11

675

试了一下vue2，真的比JS简化好多啊，JS要实现这个功能写上百行，vue2中35代码就可以搞定这个哈哈哈。

参与评论您还未登录，请先登录后发表或查看评论

【Vue】综合案例-小黑记事本

qq_39921135的博客

06-04

270

/ id一般是后台动态生成的，但如果前端需要临时使用id，可以使用时间戳，保证它是唯一的。// console.log(id) => filter 保留所有不等于该 id 的项。// 1. 通过 v-model 绑定输入框 → 实时获取表单元素的内容。// 2. 点击按钮，进行新增，往数组最前面加 unshift。

【vue】综合案例：小黑记事本组件版

m0_73956614的博客

05-16

433

核心步骤：① 拆分基础组件新建组件 → 拆分存放结构 → 导入注册使用② 渲染待办任务提供数据(公共父组件)→父传子传递 list → v-for 渲染③ 添加任务收集数据 v-model → 监听事件 →子传父传递任务 → 父组件 unshift④ 删除任务监听删除携带 id →子传父传递 id → 父组件 filter 删除⑤ 底部合计和清空功能底部合计：父传子传递 list → 合计展示清空功能：监听点击 →子传父通知父组件 → 父组件清空。

用Vue实现小黑记事本案例

qq_34306228的博客

04-08

1369

用Vue实现小黑记事本案例实现内容代码介绍全部代码实现内容新增数据删除操作统计个数清空clear 隐藏在无数据时是隐藏状态代码介绍输入区域 <div id="record"> <h1>小黑记事本</h1> <div class="text"> <input type="text" class="inou" placeholder="请输入任务" v-model="req" @

【Vue】小黑记事本

汤圆小丸叽的博客

02-25

1052

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>小黑记事本</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="robots" content="noin

小黑记事本

2301_81705218的博客

09-03

188

【代码】小黑记事本。

Vue 小黑记事本组件版

qq_64628470的博客

11-13

931

渲染功能：1.提供数据：提供在公共的父组件 App.vue2.通过父传子，将数据传递给TodoMain3.利用 v-for渲染添加功能：1.收集表单数据 v-model2.监听事件（回车+点击都要添加）3.子传父，讲任务名称传递给父组件 App.vue4.进行添加 unshift（自己的数据自己负责）5.清空文本框输入的内容6.对输入的空数据进行判断删除功能1.监听事件（监听删除的点击）携带id2.子传父，讲删除的id传递给父组件的App.vue。

父子组件传值案例（小黑记事本）

Providential365的博客

08-06

283

拆分基础组件渲染待办任务添加任务删除任务底部合计和清空功能持久化存储。

Vue学习笔记4-vue指令for/model /案例：小黑记事本

weixin_50119334的博客

10-29

281

vue指令 v-for 根据数据生成列表结构，数组经常和 v-for 结合使用语法：v-for="item in arr" arr 是数组名（自定义的），in 是关键字，不可更改，item 是遍历的每一项，可以更改 item 和 index 可以结合其他指令一起使用数组长度的更新会同步到页面上，是响应式的 <div id="app"> <input type="button" value="添加数据" @click="add"> <in

Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记

upgrade_bro的博客

08-21

2444

2023新版Vue2+Vue3基础入门到实战项目。Vue快速上手！

VUE快速入门第二章：本地应用（V-text、V-html、V-on、V-show、V-if、V-bind、V-for、V-on、V-model）

ikunsdc 的博客

02-14

258

第二章：本地应用通过vue实现常见网页效果。 Vue指令是以v-开头的一组特殊语法。常见Vue指令 1、内容绑定，事件绑定：v-text、v-html、v-on基础 2、显示切换，属性绑定：v-show、v-if、v-bind 3、列表循环，表单元素绑定：v-for、v-on补充、v-model 本地应用-V-text指令 v-text作用：设置标签内容使用差值表达式{{}}可替换指定内容 <body> &lt...

Vue--2023.6.23

weixin_65590235的博客

06-23

358

vue

vue2（1）之Vue 概念 / 创建实例 / 插值表达式 / 响应式特性 /vue8个重要指令(内容/条件/列表渲染，事件/属性/双向绑定）

qq_66318904的博客

04-26

919

概念：Vue (是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点所谓框架：就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。提到框架，不得不提一下库。库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等。

工厂模式的介绍及实现

户伟伟的博客

09-25

工厂模式（Factory Pattern）是一种创建型设计模式，提供了一种创建对象的接口，而无需显式指定对象的具体类。在这种模式中，我们通过定义一个工厂类，专门负责生产各种类型的对象，这样我们可以避免直接在代码中实例化具体类，使代码更具扩展性、灵活性和维护性。解耦：客户端代码与具体的类解耦，避免了对象创建逻辑的重复。简化对象创建：通过工厂统一管理对象的创建逻辑，使代码更清晰易懂。扩展性强：新增类时，只需在工厂中增加创建逻辑，而不必修改现有的业务代码。

基于Hive和Hadoop的哔哩哔哩网站分析系统

最新发布

图南的博客

09-27

221

本项目是一个基于大数据技术的哔哩哔哩平台分析系统，旨在为用户提供全面的哔哩哔哩视频数据和深入的用户行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理，利用 MapReduce 进行数据分析和处理，通过 Sqoop 实现数据的导入导出，以 Spark 为核心进行高效的数据处理。整个系统结合了大数据处理技术，为用户提供精准的内容推荐和深入的用户兴趣分析，帮助平台更好地了解视频趋势和用户需求。

基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计

央顺科技官方博客

09-24

842

机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。

智能BI平台项目

2302_79400545的博客

09-22

226

BI商业智能：数据可视化、报表可视化系统。

小黑记事本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> ``` 以上是小黑记事本的一个简化版本，实现了输入内容的保存和清空，并将已保存的笔记展示在界面上。用户可以在文本框中输入内容，点击保存按钮即可将内容添加到已保存的笔记列表中。点击清空按钮可以清空文本框中的内容。小黑记事本提供了简单的界面交互，方便用户保存和管理笔记。