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

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

news 2025/10/28 20:18:48

//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

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/10/15 2:16:53

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/10/26 23:03:04

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/10/23 12:52:00

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

编程新知 2025/8/16 12:41:25

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

编程新知 2025/10/12 8:34:10

Kubernetes 节点自动伸缩（Cluster Autoscaler）原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

编程新知 2025/10/23 21:38:01

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

编程新知 2025/10/20 21:44:22

VSCode 没有添加Windows右键菜单

关键字&#xff1a;VSCode&#xff1b;Windows右键菜单&#xff1b;注册表。 文章目录 前言一、工程环境二、配置流程1.右键文件打开2.右键文件夹打开3.右键空白处打开文件夹 三、测试总结 前言 安装 VSCode 时没有注意&#xff0c;实际使用的时候发现 VSCode 在 Windows 菜单栏…...

编程新知 2025/10/22 21:43:10

21-Oracle 23 ai-Automatic SQL Plan Management（SPM)

小伙伴们&#xff0c;有没有迁移数据库完毕后或是突然某一天在同一个实例上同样的SQL&#xff0c; 性能不一样了、业务反馈卡顿、业务超时等各种匪夷所思的现状。 于是SPM定位开始&#xff0c;OCM考试中SPM必考。 其他的AWR、ASH、SQLHC、SQLT、SQL profile等换作下一个话题…...

编程新知 2025/10/25 8:22:49

性能优化中，多面体模型基本原理

1&#xff09;多面体编译技术是一种基于多面体模型的程序分析和优化技术&#xff0c;它将程序 中的语句实例、访问关系、依赖关系和调度等信息映射到多维空间中的几何对 象&#xff0c;通过对这些几何对象进行几何操作和线性代数计算来进行程序的分析和优 化。 其中&#xff0…...

编程新知 2025/10/1 21:40:05