dolist案例实现

这段代码是一个使用Vue.js实现的简单的ToDoList(待办事项列表)应用。我们分几个部分详细解释这段代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>todolist</title><script src="../02%20vue%20初识/vue.js"></script><style type="text/css">.list_con {width: 600px;margin: 50px auto 0;}.inputtxt {width: 550px;height: 30px;border: 1px solid #ccc;padding: 0px;text-indent: 10px;}.inputbtn {width: 40px;height: 32px;padding: 0px;border: 1px solid #ccc;}.list {margin: 0;padding: 0;list-style: none;margin-top: 20px;}.list li {height: 40px;line-height: 40px;border-bottom: 1px solid #ccc;}.list li span {float: left;}.list li a {float: right;text-decoration: none;margin: 0 10px;}</style>
</head>
<body>
<div id="todolist" class="list_con"><h2>To do list</h2><input type="text" v-model="message" class="inputtxt"><input type="button" @click="addItem" value="增加" class="inputbtn"><ul id="list" class="list"><li v-for="(item,key) in dolist"><span>{{item}}</span><a @click="upItem(key)" class="up"></a><a @click="downItem(key)" class="down"></a><a @click="delItem(key)" class="del">删除</a></li></ul>
</div>
<script>const app={data(){return{message:"",dolist:["学习GO语言","学习JavaScript语言","学习HTML语言"]}},methods:{addItem(){// this.dolist.unshift(this.message) //前缀添加this.dolist.push(this.message)   //追加添加},//对当前下标开始操作upItem(key){console.log(key)var res = this.dolist.splice(key,1)   //数组类型console.log(res)this.dolist.splice(key-1,0,res[0])},downItem(key){console.log(key)var res = this.dolist.splice(key,1)console.log(res)this.dolist.splice(key+1,0,res[0])},delItem(key){console.log(key)this.dolist.splice(key,1)}}}vm=Vue.createApp(app).mount('#todolist')
</script>
</body>
</html>

实现效果:
在这里插入图片描述
添加内容学习python语言
通过message的v-model方法对标签进行双向传参实现删除功能。
在这里插入图片描述
删除列表学习HTML语言:
在这里插入图片描述
学习ptyhon语言向上👆移动:
在这里插入图片描述
学习GO语言向下👇移动:
在这里插入图片描述

HTML结构

  • div#todolist是整个ToDoList的容器,其中包含一个输入框用于输入新待办事项,一个按钮用于添加新待办事项到列表中,以及显示待办事项的ul#list列表。
  • 列表中的每一项代表一个待办事项。每个待办事项显示其内容,并且有向上(↑)、向下(↓)和删除三个操作链接。

CSS样式

  • CSS部分主要是控制待办事项列表的布局和视觉效果,例如设置容器的宽度、输入框和按钮的样式、列表项的边框和布局等。

JavaScript(Vue.js)

  • app对象定义了这个Vue应用的数据和方法。
    • data()函数返回应用的响应式数据:
      • message用于绑定到输入框,存储新待办事项的文本。
      • dolist是一个数组,存储所有的待办事项。
    • methods对象定义了一些方法来操作待办事项:
      • addItem方法用来将message中的新待办事项添加到dolist数组中。
      • upItem方法接受一个待办事项的索引key,将该待办事项在列表中上移一位。
      • downItem方法接受一个待办事项的索引key,将该待办事项在列表中下移一位。
      • delItem方法接受一个待办事项的索引key,将该待办事项从列表中删除。

Vue指令

  • v-model="message": 将输入框的值双向绑定到message数据。
  • @click="addItem": 给增加按钮绑定点击事件,点击时调用addItem方法。
  • v-for="(item,key) in dolist": 动态渲染dolist数组中的每一项,item是待办事项的内容,key是其索引。
  • @click="upItem(key)"@click="downItem(key)"@click="delItem(key)": 分别给上移、下移和删除操作绑定点击事件,点击时调用对应的方法并传递当前待办事项的索引。

这个ToDoList应用通过Vue.js能够非常简洁地实现待办事项的添加、上移、下移和删除操作,展示了Vue.js在构建交互式Web应用方面的便利性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/669221.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

互联网医院|互联网医院平台让医疗更智慧更容易

近年来&#xff0c;互联网医院在我国的应用范围不断扩大。然而&#xff0c;仍有许多人和医疗机构对线上问诊小程序的推广持保留态度&#xff0c;认为其应用效果不佳、覆盖范围有限。那么&#xff0c;我们应如何充分利用互联网医院系统&#xff0c;让线上医疗发挥更大的优势呢&a…

【发票识别】新增针对图片发票的识别(升级中)

说明 为了完善发票识别的功能&#xff0c;目前发票识别支持发票图片格式的识别&#xff0c;增加可用性。 体验 体验地址&#xff1a;https://invoice.behappyto.cn/invoice-service/ 体验地址上面有示例的发票&#xff0c;可以下载上传识别或者复制url地址进行识别。 技术栈…

不下载任何插件和依赖,在线导出swagger的api接口文档(word)

一、前言 swagger是一个非常方便用来生成api的工具集&#xff0c;它提供了可视化的restful风格的web界面&#xff0c;方便查看生成的api。 但是&#xff0c;想要将swagger生成的api直接导出为doc文档&#xff0c; 似乎不太方便实现&#xff0c;解析swagger的json串&#xff0c;…

错帐的查找与更正方法

目录 一. 错帐的查找方法二 . 结账![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9dd023684fb744acbfd00ff0bf8f7ef3.png)三. 对账 \quad 一. 错帐的查找方法 \quad \quad 实际工作中常用逆查法,因差错往往出现于后期。 \quad \quad 1、差数是由于漏记、看错、抄…

使用Virt-Manager定制 Windows Server QCOW2镜像

使用Virt-Manager定制 Windows Server QCOW2镜像 前言 在云计算和虚拟化技术日益普及的今天&#xff0c;定制化的虚拟机镜像对于满足特定需求显得尤为重要。Virt-Manager是一个强大的工具&#xff0c;可以帮助用户轻松地创建和管理虚拟机镜像。本文将指导您如何使用Virt-Manag…

istio 限流

#详细参数看官网&#xff0c;我参数就不解释https://istio.io/latest/docs/reference/config/networking/destination-rule/cat << EOF > dr.yaml apiVersion: networking.istio.io/v1alpha3 kind: DestinationRule metadata:name: my-testnamespace: demon spec:hos…

【亿级数据专题】「高并发架构」盘点本年度探索对外服务的百万请求量的API网关设计实现

盘点本年度探索对外服务的百万请求量的API网关设计实现 背景介绍高性能API网关API网关架构优化多级缓存架构设计多级缓存富客户端漏斗模型数据读取架构 异步刷新过期缓存网关异步化调用模型高性能批量API调用&#xff08;减少对于网关的交互和通信&#xff09;并行调用和请求合…

【论文精读】多模态情感分析 —— VLP-MABSA

Vision-Language Pre-Training for Multimodal Aspect-Based Sentiment Analysis 本篇论文发表于ACL-2022 原文链接 https://arxiv.org/abs/2204.07955 源码 GitHub - NUSTM/VLP-MABSA 模态&#xff1a;图像文本 基于多模态方面的情感分析(MABSA)近年来越来越受到关注。然而&am…

【C/C++ 17】继承

目录 一、继承的概念 二、基类和派生类对象赋值转换 三、继承的作用域 四、派生类的默认成员函数 五、继承与友元 六、继承与静态成员变量 七、菱形继承与虚拟继承 一、继承的概念 继承是指一个类可以通过继承获得另一个类的属性和方法&#xff0c;扩展自己的功能&…

Unity3D实现坦克大战

一、效果图演示 二、逻辑剖析 从界面上&#xff1a; 需要一个Canvas满屏对着用户&#xff0c;该Canvas上展示用户的游戏数据&#xff0c;比如血条。需要一个Canvas放在蓝色坦克上方&#xff0c;也需要实时对着用户&#xff0c;显示敌人的血条信息两个坦克一个平面Plane放草地…

全球5大住宅代理IP服务商测评对比

住宅IP代理为跨境出海用户提供了更加多元、安全和高效的网络访问体验。住宅代理服务使用真实的住宅IP地址&#xff0c;而这些IP地址通常最接近于海外个人家庭用户&#xff0c;从而减少了被封锁或标记为可疑流量的可能性&#xff0c;对于部分跨境电商平台账号&#xff08;如亚马…

Unity动画循环偏移的使用

最近项目中有一个需求是做煤矿中猴车的动画&#xff0c;动画本身不复杂&#xff0c;但是猴车很多&#xff0c;怎么能简化工作量呢&#xff1f; 首先单个猴车的动画循环是必须要做的&#xff0c;重点是怎么让不同的猴车动画按顺序错开&#xff0c;研究了以下&#xff0c;可以通过…

Docker Dockerfile

1、概念介绍 Dockerfile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本。 每条保留字指令都必须为大写字母且后面要跟随至少一个参数 指令按照从上到下&#xff0c;顺序执行 #表示注释 每条指令都会创建一个新的镜像层并对镜像进…

[开源]GPT Boss – 用图形化的方式部署您的私人GPT镜像网站

在这个以数据和智能为核心的时代&#xff0c;掌握最新的技术趋势是每个企业和个人都需要做到的。这就是GPT Boss存在的意义&#xff1a;一个基于OpenAI技术的一站式GPT应用解决方案。 自2022年起&#xff0c;GPT Boss团队便投身于人工智能领域&#xff0c;将OpenAI的GPT模型带给…

《Linux C编程实战》笔记:有名管道

管道的一个问题就是没有名字&#xff0c;因此只能用于有亲缘关系的进程间通信。 有名管道(named pipe或FIFO)它提供一个路径名与之关联&#xff0c;以FIFO的文件形式存储于文件系统中。有名管道是一个设备文件&#xff0c;因此&#xff0c;即使进程与创建FIFO的进程不存在亲缘…

使用maven对springboot项目进行瘦身

目录 一、什么是Maven 二、springboot 项目 三、springboot 项目瘦身 一、什么是Maven Maven是一个基于Java的项目管理和构建工具。它通过提供一个一致的项目结构、自动化构建脚本和依赖管理系统&#xff0c;简化了Java项目的构建过程。 Maven使用一种称为POM&#xff08;…

华为数通方向HCIP-DataCom H12-821题库(单选题:381-400)

第381题 以下是某台设备通过display isis lsdb命令输出的信息,那么关于以上输出的信息的描述,正确的是哪一项? <R1>display isis lsdbDatabase information for ISIS(1)--------------------------------Level-1 Link State DatabaseLSPID Seq Num…

【Gephi项目实战-带数据集】利用gephi绘制微博肖战超话120位用户关系图,并计算整体网络指标与节点指标

数据集在评论区&#xff0c;B站演示视频在评论区&#xff01; 简介 最近2天需要用到gephi做社会网络分析&#xff0c;于是从0开始接触gephi并摸索出了gephi的基本使用指南。下面将结合真实的节点文件与边文件&#xff0c;利用gephi绘制社会网络并计算相关测量指标。整个过程会…

数据库学习笔记2024/2/5

2. SQL 全称 Structured Query Language&#xff0c;结构化查询语言。操作关系型数据库的编程语言&#xff0c;定义了 一套操作关系型数据库统一标准 2.1 SQL通用语法 在学习具体的SQL语句之前&#xff0c;先来了解一下SQL语言的通用语法。 1). SQL语句可以单行或多行书写&…

扩展鸿蒙ArkUI日期组件

鸿蒙ArkUI日期组件使用的是DatePickerDialog.show基础上扩展的表单式输入组件&#xff0c;方便在输入日期方式快速使用及复用。 /*** 日期*/ Component export default struct DiygwDate{//绑定的值Link Watch(onValue) value:string;// 隐藏值State valueField: string valu…