vue实现记事本(无样式版)

这篇具有很好参考价值的文章主要介绍了vue实现记事本(无样式版)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现了增、删功能,任务统计,全删除功能。
vue实现记事本(无样式版),前端,vue.js,javascript,ecmascript文章来源地址https://www.toymoban.com/news/detail-715111.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>
  <div id="app">
    <input placeholder="请输入待执行的任务" v-model="todoName">
    <button @click="add">添加任务</button>

    <ul>
      <li v-for="(item,index) in list" :key="item.id">
        {{index+1}} {{item.name}}
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>

    <div>
      合计:{{list.length}}
      <button @click="clear">清空任务</button>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: "#app",
      data: {
        todoName: '',
        list: [
          { id: 1, name: '跑步一公里' }
        ]
      },
      methods: {
        del(id) {
          confirm('是否删除该任务?')
          this.list = this.list.filter(item => item.id !== id)
        },
        add() {
          if (this.todoName.trim() == '') {
            alert('请输入有效内容')
            return
          }
          this.list.unshift({
            id: +new Date(),
            name: this.todoName
          })
          this.todoName = ''
        },
        clear() {
          this.list = []
        }
      }
    })
  </script>

</body>

</html>

到了这里,关于vue实现记事本(无样式版)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实现一个简单的记事本APP

    主要涉及的相关知识: 1、控件RecyclerView的使用 2、轻量级数据库SQLite的使用 3、activity之间的跳转以及参数传递 首先创建MainActivity 为方便这里使用的是帧布局FrameLayout,主要包含两个控件,一个是用于显示记事本相关信息的RecyclerView,另一个是用于进行添加记事信息FloatingAct

    2024年02月12日
    浏览(44)
  • 【windows程序设计作业】用c#语言实现记事本

    使用Visual C# 2015设计一个Windows应用程序——记事本,通过本章的学习,可以进一步掌握MenuStrip(菜单)、ToolStrip(工具栏)、RichTextBox(高级文本框)和StatusStrip(状态栏控件)等控件的使用,以及如何使用CommonDialog(公共对话框)实现对文本的存取、格式设置等操作。 实现

    2024年02月05日
    浏览(59)
  • android studio大作业,android studio课程设计,记事本实现

    先看效果图 功能点实现: 登录,注册,记事本分类添加,删除,数据分析统计报表,数据库使用SQLlite 部分实现代码

    2024年02月11日
    浏览(55)
  • 基于安卓系统(android)记事本APP管理系统设计与实现

    目录 摘要 I Abstract II 1 绪论 1.1 课题来源、目的和意义 1 1.2 国内外基本研究情况 1 2 需求分析 2.1 用户需求 4 2.2 功能需求 4 2.3 数据库选择 6 2.4 性能需求 6 3 概要设计 3.1 功能概要设计 7 3.2 数据库概要设计 13 4 详细设计 4.1 功能设计 15 4.2 数据库设计 30 5 系统功能实现 5.1 系统架

    2024年02月11日
    浏览(38)
  • 网络攻防:DLL注入实现键盘钩取+记事本注入并联网下载网页

    目录 前言 一、dll注入的介绍和示例 dll注入介绍 dll注入示例 二、dll注入实现方法 三、键盘消息监听钩取 消息钩取原理 键盘消息监听钩取具体实现 四、dll注入记事本实现联网下载网页 介绍  实现 五、总结 这是研一专业课网络攻防对抗术的一次汇报,我对其大致内容做了相

    2024年02月11日
    浏览(52)
  • 电脑记事本在哪里?电脑桌面显示记事本要怎么设置?

    绝大多数上班族在使用电脑办公时,都需要随手记录一些琐碎或重要的事情,例如工作注意事项、常用的文案、某项工作的具体要求、多个平台的账号和密码等。于是就有不少小伙伴想要使用电脑记事本软件来记录,那么电脑记事本在哪里呢?想要电脑桌面显示记事本怎么设

    2024年02月15日
    浏览(41)
  • WIN11右键打开方式没有记事本,记事本无法使用问题

    背景: 个人手欠把记事本卸载了,然后又安装了,结果记事本可以打开,但是应用里面没有,右击打开方式也没有!!(检索过程发现很多人人用不了是因为升级W11) 问题: 1.如题,右击打开方式里没有记事本选项! 2.右击更多打开方式,通过查找到notepad.exe打开,出现程序

    2024年02月04日
    浏览(104)
  • Android记事本

    1、项目需求分析 1.1、记事功能需求分析: 1.1.1、显示记事 用户打开记事本可以看到之前所写的所有记事内容,进入主页后,软件应该从数据库中搜索出该用户所写的全部记事,并将所有的数据进行显示。 1.1.2、添加记事 设置添加按钮,点击添加按钮之后可以编辑记事的标题

    2024年02月03日
    浏览(53)
  • Android:实现安卓小程序-记事本(备忘录)的开发,教你如何增加拿到BAT大厂offer几率

    public MyBaseAdapter(Context context, List data) { this.context = context; this.data = data; } @Override public Object getItem(int i) { return null; } @Override public long getItemId(int i) { return 0; } @Override public int getCount() { if(data==null) return 0; return data.size(); } } 接着在编写NoteAdapter类继承上类,初始化view, 将Note条目的

    2024年04月25日
    浏览(57)
  • 11 MFC 制作记事本

    选择Menu 点击新建 将内容写入\\\"_\\\"的用 符号 将菜单加入到窗口中 右键选择添加事件处理程序 点击确定 Edit设置多行显示 Edit设置按回车能够换行 Edit设置竖直方向滚动 打开文件代码 查找与替换对话框显示(非模态对话框) 对话框消息与对话框处理函数 对话框处理函数 //note

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包