当前位置： 首页 > news >正文

Vue待办事项（组件，模块化）

news 2026/2/5 8:59:36

//html页面代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            ul,
            ol {
                list-style: none;
            }

            .header {
                width: 400px;

                margin: 0px auto;
                margin-top: 50px;
                box-shadow: 1px 1px 5px 5px;
            }

            .input {
                padding: 10px;
                height: 30px;
                display: flex;
                
            }

            .input input{
                padding-left: 10px;
                flex: 1;
            }

            .input button{
                width: 60px;
                height: 30px;
            }

            .text {
                padding: 10px;
                display: flex;

            }

            .text .list {
                flex: 1;
                
                text-align: center;
                cursor: pointer;
            }

            /*     .text div:nth-child(1){
                background-color: black;
                color: white;
                
            } */
            .text .active {
                background-color: black;
                color: white;
            
            }
            .cart {
                padding: 10px;
            }

            .cart li {
                height: 20px;

                display: flex;
                margin-bottom: 10px;
            }

            .cart li div {
                flex: 1;
                padding-left: 10px;
            }

            .cart li input {
                height: 20px;
                width: 20px;

            }

            .clear {
                padding: 10px;
                display: flex;
            }

            .clear div {
                flex: 1;
            }

            
        </style>
    </head>
    <body>
        <div class="header" id="app">
            <my-input @add="addcartin"></my-input>
           <my-text :type="type" @blue="tab" :computetode="computetode" :uncomputetode="uncomputetode" :arr="arr"></my-text>
           <my-cart :list=" currentarr" @remove="remove" ></my-cart>
          <my-clear @clear="removeall"></my-clear>
        </div>
        <script type="module">
            import { createApp } from './lib/vue.esm-browser.js'
            import  AddOptions from './components/tode-input.js'
            import AddText from './components/tode-text.js'
            import AddCart from './components/tode-cart.js'
            import AddFooter from './components/tode-footer.js'
            var itemid=1
            const app = createApp({
                data() {
                    return {
                       arr:[],
                       type:'all',
                       currentarr:[]
                    }
                },
                computed: {
                    computetode() {
                        return this.arr.filter(item => item.complate == true)
                    },
                    uncomputetode() {
                        return this.arr.filter(item => item.complate == false)
                    },
                },
                methods:{
                    addcartin(title){
                        this.arr.push({
                            id:itemid++,
                            complate:false,
                            title
                        })
                    },
                    removeall(data){
                        this.arr=data
                    },
                    remove(id){
                        this.arr=this.arr.filter(item=>item.id!=id)
                    },
                    tab(data){
                        this.type=data
                    }
                },
                watch: {
                    uncomputetode() {
                        if (this.type == 'every') {
                            this.currentarr = this.uncomputetode
                        } else if (this.type == 'some') {
                            this.currentarr = this.computetode
                        } else {
                            this.currentarr =this.arr
                        }
                    },
                    type: {
                        handler(newtype) {
                            console.log(newtype)
                            switch (newtype) {
                                case 'all':
                                    this.currentarr = this.arr
                                    break
                                case 'some':
                                    this.currentarr = this.computetode
                                    break
                                case 'every':
                                    this.currentarr = this.uncomputetode
                                    break
                            }
                        },
                        immediate: true,
                    },
                }
            
            })
            app.component('MyInput', AddOptions)
            app.component('MyText',AddText)
            app.component('MyCart',AddCart)
            app.component('MyClear',AddFooter)
            app.mount('#app')
        </script>
    </body>
</html>

//tode-cart.js代码

var AddCart={
                template:`
                <div class="cart">
                    <ul>
                        <li v-for="item in list">
                            <input type="checkbox"  v-model="item.complate" :key="item.id"/>
                            <div>{{item.title}}</div>
                            <button @click="remove(item.id)">删除</button>
                        </li>
                    </ul>
                </div>
                `,
                
                  props: ['list'],
                  methods:{
                      remove(id){
                          this.$emit('remove',id)
                      }
                  }
                  
            }
export default AddCart

//tode-footer.js代码

var AddFooter={
                template:`
                <div class="clear">
                    <div></div>
                    <button @click="removeall()">清除</button>
                </div>
                `
                ,
                methods:{
                    removeall(data){
                        this.$emit('clear',[])
                    }
                },
                
            }
export default AddFooter

//tode-input.js代码

    var AddOptions={
                template:`
                <div class="input">
                <input type="text" placeholder="请输入" ref="inputref"  v-model="message"/>
                <button @click="haddleadd()">添加</button>
                </div>
                `,
              data(){
                  return{
                     message:'' 
                  }
              },
              methods:{
                  haddleadd(data){
                      this.$emit("add",this.message)
                  }
              }
            }
export default AddOptions

//tode-text.js代码

var  AddText={
                template:`
                <div class="text">
            <div class="list" :class="type=='all'? 'active' : '' " @click="check('all')">所有待办事项({{arr.length}})
            </div>
            <div class="list" :class="type=='some'? 'active' : '' " @click="check('some')">
                已完成({{computetode.length}})</div>
            <div class="list" :class="type=='every'? 'active' : '' " @click="check('every')">
                未完成({{uncomputetode.length}})</div>
                </div>
                `,
                props:['type','arr','uncomputetode','computetode'],
                methods:{
                    check(item){
                        this.$emit('blue',item)
                    }
                }
            }
export default AddText

相关文章：

Vue待办事项（组件，模块化）

//html页面代码 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <style> * { padding: 0; margin: 0; }…...

编程日记 2024/1/21 7:21:32

Vue中的组件

在应用程序的开发中&#xff0c;组件是不可缺少的。在Vue的使用中&#xff0c;同样也会用到组件。 　　vue组件的一般知识点&#xff1a; 　　1、组件的名字唯一&#xff1b; 　　2、组件以Html形式书写&#xff1b; 　　3、组件可以复用&#xff1b; 　　4、组件可以嵌套&…...

编程日记 2024/1/21 7:15:25

svg矢量图标在wpf中的使用

在wpf应用程序开发中&#xff0c;为支持图标的矢量缩放&#xff0c;及在不同分辨率下界面中图标元素的矢量无损缩放&#xff0c;所以常常用到svg图标&#xff0c;那么如果完 美的将svg图标运用到wpf日常的项目开发中呢&#xff0c;这里分享一下我的个人使用经验和详细步骤。 步…...

编程日记 2024/1/21 7:12:22

如何在云端加速缓存构建

缓存是指将某类数据存储起来以便以后重复使用的过程&#xff0c;它的运用在开发场景中非常普遍。类似于你习惯把最常用的调料放在厨房台面上&#xff0c;而不是橱柜里&#xff0c;这样你在准备大餐时就可以轻松取用。 但对于一个更为技术性、更精确的用例&#xff0c;比如像谷…...

编程日记 2024/1/21 7:10:20

JavaWeb-Cookie与Session

一、概念 是否还记得我们在HTTP概念中提到&#xff1a;HTTP的一大特点是无状态&#xff0c;这意味着多次HTTP请求之间是无法共享数据的。而在请求之间共享一些数据又是我们期望达到的效果。&#xff08;例如登录的记住我功能&#xff09;于是便有了会话跟踪技术&#xff0c;而…...

编程日记 2024/1/21 7:06:16

ZABBIX根据IP列表,主机描述,或IP子网批量创建主机的维护任务

有时候被ZABBIX监控的主机可能需要关机重启等维护操作,为了在此期间不触发告警,需要创建主机的维护任务,以免出现误告警 ZABBIX本身有这个API可供调用(不同版本细节略有不同,本次用的ZABBIX6.*),实现批量化建立主机的维护任务 无论哪种方式(IP列表,主机描述,或IP子网)创建维护…...

编程日记 2024/1/21 7:05:15

PMIS_ENT_STD

...

编程日记 2024/1/21 7:04:14

32 登录页组件

效果演示 实现了一个登录页面的样式&#xff0c;包括一个容器、左侧和右侧部分。左侧部分是一个背景图片&#xff0c;右侧部分是一个表单&#xff0c;包括输入框、复选框、按钮和忘记密码链接。整个页面的背景色为白色&#xff0c;容器为一个圆角矩形&#xff0c;表单为一个半透…...

编程日记 2024/1/21 7:03:13

Docker（一）简介和基本概念：什么是 Docker？用它会带来什么样的好处？

作者主页&#xff1a; 正函数的个人主页 文章收录专栏&#xff1a; Docker 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01; 一、简介 本章将带领你进入 Docker 的世界。 什么是 Docker&#xff1f; 用它会带来什么样的好处&#xff1f; 好吧&#xff0c;让我们带…...

编程日记 2024/1/21 6:59:09

【Linux】进程的概念 进程状态 进程优先级

Content 一、什么是进程1. 进程的概念2. 进程的描述 - 进程控制块&#xff08;PCB&#xff09;3. Linux下的进程 二、进程状态1. 教科书中的进程状态运行状态阻塞状态挂起状态 2. Linux下的进程状态R&#xff08;running&#xff09;- 运行状态S&#xff08;sleeping) - 睡眠状…...

编程日记 2024/1/21 6:57:08

Go语言热重载和优雅地关闭程序

Go语言热重载和优雅地关闭程序 我们有时会因不同的目的去关闭服务&#xff0c;一种关闭服务是终止操作系统&#xff0c;一种关闭服务是用来更新配置。 我们希望优雅地关闭服务和通过热重载重新加载配置&#xff0c;而这两种方式可以通过信号包来完成。 1、代码实现 package…...

编程日记 2024/1/21 6:52:03

Python实现两个列表相加的方法汇总

1. 使用 “” 运算符 通过 “” 运算符将两个列表相加&#xff0c;得到一个新的列表。例如&#xff1a; list1 [1, 2, 3] list2 [4, 5, 6] result list1 list2 print(result) # [1, 2, 3, 4, 5, 6]2. 使用 extend 方法 使用 extend 方法将一个列表中的元素逐个添加到另…...

编程日记 2024/1/21 6:49:00

debian12.4配置

文章目录 debian12.4配置概述笔记将非root用户添加到sudo组更换国内源配置ssh的客户端访问END debian12.4配置 概述 在虚拟机中装了一个debian12.4, 想配置ssh客户端连接, 出了问题. 配置乱了, 还好长了个心眼, 做了快照. 发现2个问题: debian12.4默认安装完, 有ssh, 先检查…...

编程日记 2024/1/21 6:47:59

linux切换root用户su - root和su root的区别

这里说一下login shell和 no login shell的区别 通过tty客户端登陆的shell就是login shell&#xff0c;通过在图形界面使用ctrlshiftt的方式新建的shell是no login shell login shell 主要读取两个配置文件/etc/profile和~/.bash_profile no login shell 读取的文件和顺序为&am…...

编程日记 2024/1/21 6:46:57

SQL Server Management Studio创建数据表

文章目录 一、建表注意事项1.1 数据类型1.2 建立数据表的基本SQL语法 二、实例说明2.1 创建数据表2.2 实例2 三、标识列和主键示例&#xff1a; 一、建表注意事项 1.1 数据类型 可以看这个去了解数据类型&#xff1a; 1.2 建立数据表的基本SQL语法 建立数据表的基本 SQL 语…...

编程日记 2024/1/21 6:45:56

【AI的未来 - AI Agent系列】【MetaGPT】4.1 细说我在ActionNode实战中踩的那些坑

文章目录 1. MetaGPT 0.5.2 版本的坑1.1 坑一&#xff1a;cannot import name "ActionNode" from "metagpt.actions.action"1.2 坑二&#xff1a;simple_fill 没有参数 schema1.3 坑三&#xff1a;ActionNode一直在循环执行&#xff0c; 2. 升级成 MetaGP…...

编程日记 2024/1/21 6:44:55

Android学习（五）：常用控件

Android学习&#xff08;五&#xff09;&#xff1a;常用控件 常用控件 TextViewEditTextButtonRadioButtonImageView 1、TextView控件 1.1、简介 TextView是用于显示文字(字符串)的控件&#xff0c;可在代码中通过设置属性改变文字的大小、颜色、样式等功能。 1.2、示例…...

编程日记 2024/1/21 6:41:53

基于YOLOv8的学生课堂行为检测，引入BRA注意力和Shape IoU改进提升检测能力

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;介绍了学生课堂行为检测&#xff0c;并使用YOLOv8进行训练模型&#xff0c;以及引入BRA注意力和最新的Shape IoU提升检测能力 1.SCB介绍 摘要&#xff1a;利用深度学习方法自动检测学生的课堂行为是分析学生课堂表…...

编程日记 2024/1/21 6:38:50

【前后端分离与不分离的区别】

Web 应用的开发主要有两种模式&#xff1a; 前后端不分离 前后端分离 理解它们的区别有助于我们进行对应产品的测试工作。 前后端不分离 在早期&#xff0c;Web 应用开发主要采用前后端不分离的方式&#xff0c;它是以后端直接渲染模板完成响应为主的一种开发模式。以前后端不…...

编程日记 2024/1/21 6:36:47

ubuntu-20.04.6-live-server-amd64安装教程-完整版

简介 Ubuntu 20.04.6 Live Server AMD64 安装教程 - 完整版" 提供了详细的指南&#xff0c;旨在帮助用户在使用 AMD64 架构的服务器上安装 Ubuntu 20.04.6 Live Server 版本。该教程包含全面的步骤和详细说明&#xff0c;使用户能够顺利完成整个安装过程&#xff0c;建立…...

编程日记 2024/1/21 6:35:47

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/4 13:42:32

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/1/20 19:54:35

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/1/25 1:05:45

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2026/2/3 15:45:51

Ubuntu系统复制（U盘-电脑硬盘）

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

编程新知 2026/1/30 3:47:00