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

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

news 2025/7/7 3:45:40

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/7/4 15:27:39

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/7/6 8:45:08

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/7/4 5:47:52

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2025/7/6 10:59:21

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/6/20 18:29:18

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/1 4:45:07

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/7/7 0:36:08

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/7/5 10:04:34