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

Vue中TodoList案例_编辑

nextTick: 

MyItem.vue

加一个编辑按钮,input框:@blur失去焦点时触发事件handleBlur,ref获取真实dom:

     <inputtype="text"v-show="todo.isEdit":value="todo.title"@blur="handleBlur(todo,$event)"ref="inputTitle"><button class="btn btn-edit" @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</button>

methods加俩方法:

 //编辑handleEdit(todo){if (todo.hasOwnProperty.call('isEdit')){todo.isEdit = true}else {console.log('a@@')this.$set(todo,'isEdit',true)}// setTimeout(()=>{//   this.$refs.inputTitle.focus()// },20)this.$nextTick(function (){this.$refs.inputTitle.focus()})},//失去焦点回调(真正执行修改逻辑)handleBlur(todo,e){todo.isEdit=falseif (!e.target.value.trim())return alert('输入不能为空')this.$bus.$emit('updateTodo',todo.id,e.target.value)}

App.vue:

methods:中加一个方法

 //更新一个todoupdateTodo(id,title){this.todos.forEach((todo)=>{if (todo.id===id)todo.title=title})},

mounted钩子中添加

    this.$bus.$on('updateTodo',this.updateTodo)

beforeDestroy钩子中添加

    this.$bus.$off('updateTodo')

style中加编辑按钮样式:

.btn-edit {color: #fff;background-color: skyblue;border: 1px solid #0f7daa;margin-right: 3px;
}

 

相关文章:

Vue中TodoList案例_编辑

nextTick: MyItem.vue 加一个编辑按钮&#xff0c;input框&#xff1a;blur失去焦点时触发事件handleBlur&#xff0c;ref获取真实dom&#xff1a; <inputtype"text"v-show"todo.isEdit":value"todo.title"blur"handleBlur(todo,$even…...

什么是Redis?

什么是Redis 什么是Redis一、特性1. 支持多种数据结构2. 读/写速度快&#xff0c;性能高。3. 支持持久化。4. 实现高可用主从复制&#xff0c;主节点做数据副本。5. 实现分布式集群和高可用。 二、基本数据类型string&#xff08;字符串&#xff09;list(双向链表)set(集合)zse…...

深入浅出理解vue2/vue3响应式原理

一、简介 当谈论Vue 2和Vue 3的响应式原理时&#xff0c;我们主要关注的是其数据双向绑定的机制。数据双向绑定是指当数据发生变化时&#xff0c;视图会自动更新&#xff1b;反之&#xff0c;当视图发生变化时&#xff0c;数据也会相应地更新。这种特性让我们在前端开发中更加…...

ssh连接服务器配置

平常每次都是 ssh root111.111.111.111 然后再输入密码 很事麻烦 总结 首先本地生成密钥和公钥 ssh-keygen -t rsa -C "XXX" ~/.ssh id_rsa.pub 将公钥加入远程服务器中的authorized_keys中 用户可以手动编辑该文件&#xff0c;把公钥粘贴进去&#xff0c;也可…...

el-table 表头设置渐变色

<el-table :data"tableData" stripe><el-table-column prop"name" label"测试" align"left"></el-table-column><el-table-column prop"code" label"测试1" align"left"></…...

GB/T 25000.51解读——软件产品的易用性怎么测?

GB/T 25000.51-2016《软件产品质量要求和测试细则》是申请软件检测CNAS认可一定会用到的一部国家标准。在前面的文章中&#xff0c;我们为大家整体介绍了GB/T 25000.51-2016《软件产品质量要求和测试细则》国家标准的结构和所涵盖的内容以及对软件产品的八大质量特性中的功能性…...

408复试day2(7大排序算法)

数据结构 7大排序算法总结&#xff1a; 首先排序分为内排序和外排序&#xff1a; 内排序是指待排序的记录放置在内存&#xff0c;而外排序是指排序的过程中需要对内存进行访问。其中稳定的排序有“插冒归”&#xff0c;即插入排序、冒泡排序、归并排序。 1.冒泡排序 算法原理&a…...

Vue消息订阅与发布

引入第三方库pubsub.js: npm i pubsub-js Student.vue import pubsub from pubsub-jsmethods:{sendStudentName(){// this.$bus.$emit(hello,this.name)pubsub.publish(hello,666)}}, School.vue import pubsub from pubsub-jsmounted() {// console.log("school&quo…...

MySQL学习笔记 ------ 分组查询

#进阶5&#xff1a;分组查询 /* 语法&#xff1a; select 分组函数&#xff0c;列&#xff08;要求出现在group by的后面&#xff09; from 表 【where 筛选条件】 group by 分组的列表 【order by 排序的字段】; 注意&#xff1a;查询列表必须特殊&#xff0c;要求是分组函…...

Matlab 点云平面特征提取

文章目录 一、简介二、实现代码2.1基于k个邻近点2.2基于邻近半径参考资料一、简介 点云中存在这各种各样的几何特征,这里基于每个点的邻域协方差来获取该点的所具有的基础几何特征(如下图所示),这样的做法虽然不能很好的提取出点云中的各个部分,但却是可以作为一种数据预处…...

vite的介绍

Vite&#xff08;法语意为 "快速的"&#xff0c;发音 /vit/&#xff0c;发音同 "veet")是一种新型前端构建工具 优势 &#x1f4a1; 极速的服务启动&#xff0c;使用原生 ESM 文件&#xff0c;无需打包 ⚡️ 轻量快速的热重载&#xff0c;始终极快的模块…...

裁员 10%,暴跌 14%,这家 IT 独角兽正在被抛弃!

流量一跌再跌&#xff0c;Stack Overflow 简直被狠狠地上了一课&#xff01; 3 月份 Stack Overflow 的流量下降了近 14%。该公司的 CEO 压力空前&#xff0c;甚至昨天决定裁员 10%&#xff01; 平均每月下降6%&#xff0c;上月直接跌了近14% 开发人员越来越多地从 AI 聊天机器…...

电脑记事本在哪里?电脑桌面显示记事本要怎么设置?

绝大多数上班族在使用电脑办公时&#xff0c;都需要随手记录一些琐碎或重要的事情&#xff0c;例如工作注意事项、常用的文案、某项工作的具体要求、多个平台的账号和密码等。于是就有不少小伙伴想要使用电脑记事本软件来记录&#xff0c;那么电脑记事本在哪里呢&#xff1f;想…...

微服务笔记---Nacos集群搭建

微服务笔记---Nacos集群搭建 Nacos集群搭建1.集群结构图2.搭建集群2.1.初始化数据库2.2.下载nacos2.3.配置Nacos2.4.启动2.5.nginx反向代理2.6.优化 Nacos集群搭建 1.集群结构图 官方给出的Nacos集群图&#xff1a; 其中包含3个nacos节点&#xff0c;然后一个负载均衡器代理…...

python 小案例

要使用Django开发一个抽奖活动的后台&#xff0c;需要进行以下步骤&#xff1a; 安装Django&#xff1a;首先确保已经安装了Python和pip&#xff0c;然后使用pip安装Django库&#xff1a; pip install django 创建Django项目&#xff1a;在命令行中执行以下命令创建一个新的Dja…...

【SpringBoot】SpringBoot JPA 基础操作(CURD)

SpringData JPA 基本介绍 Spirng data jpa是spring提供的一套简化JPA开发的框架&#xff0c;按照约定好的【方法命名规则】写dao层接口&#xff0c;就可以在不写接口实现的情况下&#xff0c;实现对数据库的访问和操作。 同时提供了很多除了CRUD之外的功能&#xff0c;如分页…...

大数据技术之Hive3

目录标题 5、DML 数据操作5.1 数据导入5.1.1 向表中装载数据load5.1.2 通过查询语句向表中插入数据insert5.1.3 查询语句中创建表并加载数据5.1.4 创建表时通过 Location 指定加载数据路径 5.2 数据导出5.2.1 insert导出5.2.2 Hadoop 命令导出到本地 5.3 清除表中数据(Truncate…...

Spring Boot实践二

一、模板引擎简介 在之前的示例中&#xff0c;我们通过RestController来处理请求&#xff1a; package com.example.demospringboot.web;import org.springframework.web.bind.annotation.RestController; import org.springframework.web.bind.annotation.RequestMapping;Re…...

python:基于GeoPandas和GeoViews库将GEDI激光高程数据映射到交互式地图

作者:CSDN @ _养乐多_ 本文将介绍 GEDI(Global Ecosystem Dynamics Investigation)激光雷达数据某数据点波形数据提取,并绘制图表,添加其他图表元素并使图表具有交互性。 在本文中,我们将探索如何打开、读取和处理GEDI数据,并利用地理信息处理库GeoPandas和地理空间数…...

汇编实现strcpy

需要有两点注意&#xff1a; .type在windows的mingw上无法识别。windows下编译会找不到my_strcpy的定义&#xff08;undefined reference&#xff09;&#xff0c;通过看mingw的代码发现&#xff0c;它会在汇编函数前加一个下划线&#xff0c;所以在我们的汇编代码中加上下划线…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...