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

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

news 文章来源：https://blog.csdn.net/qq_52840130/article/details/135658517 2025/5/10 20:05:07

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

C for Graphic：Sliced Circle Image

不做UI不知道&#xff0c;没想到时至今日&#xff0c;ugui居然没有sliced filled image模式&#xff0c;用circle做filled&#xff0c;不能用sliced九宫格图&#xff0c;导致每次使用这个效果必须一张新图&#xff0c;何其浪费资源。 原始功能如下&#xff1a; 我…...

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

入门级的 DataV 教程，适用于 Vue 2

入门级的 DataV 教程&#xff0c;适用于 Vue 2。这个教程将指导您创建一个名为 datav-project 的 Vue 项目&#xff0c;并展示如何在其中使用 DataV。我们将从安装 Vue CLI 开始&#xff0c;然后创建项目&#xff0c;接着添加 DataV&#xff0c;并最后显示一个简单的数据可视化…...

编程日记 2024/1/21 6:32:43

JVM工作原理与实战(二十一)：内存管理

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、不同语言的内存管理 1.C/C的内存管理 2.Java的内存管理 二、垃圾回收的对比 1.自动垃圾回收与手动垃圾回收的对比 2.优点与缺点 总结 前言 JVM作为Java程序的运行环境&#…...

编程日记 2024/1/21 6:31:42

Win10 打开文件突然鼠标变成一个蓝色大圈卡住点不了也打不开文件，重启电脑也是这样

环境： Win10 专业版 加密客户端环境 问题描述： Win10 打开桌面word文件突然鼠标变成一个蓝色大圈卡住点不了也打不开文件，重启电脑也是这样，只有蓝色圈变大没有鼠标指针出现圈卡着不会动，和那些有鼠标箭头加小蓝色圈不一样 解决方案： 某网上查看的，还是要自己排查…...

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

论文阅读笔记AI篇 —— Transformer模型理论+实战 (四)

论文阅读笔记AI篇 —— Transformer模型理论实战 &#xff08;四&#xff09; 一、理论1.1 理论研读1.2 什么是AI Agent? 二、实战2.1 先导知识2.1.1 tensor的创建与使用2.1.2 PyTorch的模块2.1.2.1 torch.nn.Module类的继承与使用2.1.2.2 torch.nn.Linear类 2.2 Transformer代…...

编程日记 2024/1/21 6:29:40

Template -- Vue2

Vue2 版本 Node 14.14.0Npm 6.14.8Vue vue/cli 5.0.3 npm install -g vue/cli5.0.3 cnpm cnpm7.1.0 npm install -g cnpm7.1.0 --registryhttps://registry.npm.taobao.org 项目 创建 vue create single # vue 2.6.14配置 // vue.config.js const { defineConfi…...

编程日记 2024/1/21 6:28:39

zookeeper window 安装

下载 Apache ZooKeeper 解压Zookeeper安装包到指定目录&#xff0c;注意目录不要有空格。 备份zoo_sample.cfg并改名zoo.cfg 注意&#xff1a;此处的路径一定要使用双斜杠" \\ " D:\\apache-zookeeper-3.8.3-bin\\data 新建环境变量&#xff1a;ZOOKEEPER_HOME D…...

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

Redis 面试题 | 02.精选Redis高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

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

大数据开发之kafka（完整版）

第 1 章&#xff1a;Kafka概述 1.1 定义 Kafka是一个分布式的基于发布/订阅模式的消息队列&#xff0c;主要应用于大数据实时处理领域。 发布/订阅&#xff1a;消息的发布者不会将消息直接发送给特定的订阅者&#xff0c;而是将发布的消息分为不同的类别&#xff0c;订阅者只…...

编程日记 2024/1/21 6:23:34

单体架构、微服务和无服务器架构

前言 在这篇文章中&#xff0c;我将演示在决定使用单体架构、微服务架构和无服务器架构时的权衡的简化心智模型。目标是突显每种风格的固有优势和缺陷&#xff0c;并提供关于何时选择哪种架构风格的指导。 单体架构 对于小团队或项目来说是理想的入门架构。它简单易上手&…...

编程日记 2024/1/21 6:22:33