contentEditable属性

我们最常用的输入文本内容便是input与textarea,但是有一个属性,可以让我们在很多标签中,如div,table,p,span,body等,可以像input输入框一样,实现文本编辑,这便是contentEditable属性

 

 

之前有用到这个属性是在写原生table里面 用到了 

该属性的功能是允许用户编辑元素中的内容//所以这个元素必须是可以获得鼠标焦点的元素,并且在点击鼠标后要向用户提供一个插入符号,提示可编辑

contenteditable=“true”            #开启文本编辑

contenteditable=“false”          #关闭文本编辑,该字段的值缺失时,效果和这个是一样的

contenteditable=“inherit”  #(默认)表明该元素继承了其父元素的可编辑状态

mdn

使用:

<div class="count">

  <div contenteditable="true"

      v-for="(n, index) in list" :key="n"

      @blur="handleBlur(index, $event)">{{n}}</div>

</div>

export default {

  data() {

   return {

     list: ['这是1', '这是2', '这是3']

   };

  },

  methods: {

   handleBlur(index, event) {

     this.$set(this.list, index, event.target.innerText);

        console.log(this.list);

     },

   },

}; 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

快速搭建一个美观且易用的 Django 管理后台 —— django-xadmin

Django-xadmin&#xff08;也称为Xadmin&#xff09;是一个第三方的 Django 应用程序&#xff0c;它提供了一系列工具和模板来快速开发基于 Django 的后台管理界面。使用 Django-xadmin 可以用很少的代码就创建出一个强大的、具备实时查看数据、增、删、改等基本操作的 Django …

LiveNVR监控流媒体Onvif/RTSP功能-安全控制HTTP接口鉴权开启禁止游客访问开启后401 Unauthorized如何播放调用接口

LiveNVR安全控制HTTP接口鉴权开启禁止游客访问开启后401 Unauthorized如何播放调用接口&#xff1f; 1、安全控制1.1、接口鉴权1.2、禁止游客访问 2、401 Unauthorized2.1、携带token调用接口2.1.1、获取鉴权token2.1.2、调用其它接口2.1.2.1、携带 CookieToken2.1.2.2、携带 U…

C人脸识别

1、原始图片&#xff1a; 2、灰度化下&#xff1a; 3、均值滤波&#xff1a; 4、 二值图加边缘检测 5、生成积分图 6、把待检测的人脸区域划分为25个&#xff0c;因为是一个数组&#xff0c;这样分别统计每个区域的像素个数&#xff1a; x0: 60, y0: 100, x1: 157, y1: 200 …

介绍AI绘画课,让智能工具助力创作 释放无限想象力 助你成为绘画大师

演示地址&#xff1a; www.runruncode.com/portal/article/index/id/19458/cid/81.html 画画是一项有趣的活动&#xff0c;它让人充满无限可能。对许多人来说&#xff0c;画画既是一种放松的方式&#xff0c;也是一种与创意、文化和艺术联系的途径。如果你是一个初学者&#x…

云原生——Docker容器化实战

❄️作者介绍&#xff1a;奇妙的大歪❄️ &#x1f380;个人名言&#xff1a;但行前路&#xff0c;不负韶华&#xff01;&#x1f380; &#x1f43d;个人简介&#xff1a;云计算网络运维专业人员&#x1f43d; 前言 "Docker"一词指代了多个概念&#xff0c;包括开源…

uniapp实现聊天消息触,vue3和vue2实现聊天消息触底 scrollTop ,scrollHeight Pc端H5端都适用

uniapp触底SDN链接如下(本人的另一篇博客) uniapp聊天时时触底链接 Pc端 模拟手机端H5 vue3写法 <template><div><!-- 聊天窗体 --><div class"test" id"gundong"><div class"text" v-for"p in chat"&…

2023年上半年总结

2023年上半年总结 引言问答CSDN 竞赛技能树博客原力值粉丝数贡献墙个人能力图新星计划总结 引言 老顾是一个懒癌晚期患者&#xff0c;通常情况下&#xff0c;是一条不折不扣的咸鱼&#xff0c;在工作中&#xff0c;也大多数时间都用来摸鱼了。 摸鱼时间太长&#xff0c;也就有…

RabbitMQ的集群

新建一个虚拟机,重新安装一个RabbitMQ,不会安装的可以看下面的连接: 在Linux中安装RabbitMQ_流殇꧂的博客-CSDN博客 1.修改/etc/hosts映射文件,两台虚拟机都需要修改 vim /etc/hosts 127.0.0.1 node1 localhost.localdomain localhost4 localhost4.localdomain4 ::1 node1 loca…

SpringBoot + Kotlin 中使用 GRPC 进行服务通信

示例项目见&#xff1a;kotlin-grpc 一、导入依赖&#xff1a; import com.google.protobuf.gradle.* plugins { id("org.springframework.boot") version "2.3.1.RELEASE" id("io.spring.dependency-management") version "1.0.9.REL…

idea连接远程MySQL数据库

填写URL&#xff0c;以mysql为例 格式 jdbc:mysql://ip地址:端口号/数据库名 jdbc:mysql://127.0.0.1:3306/ldentification _Information

软件测试基础知识

软件测试的生命周期 软件测试的生命周期和软件的生命周期是不一样的&#xff0c;软件包括需求分析和规划&#xff0c;设计和编码&#xff0c;测试和验证&#xff0c;部署和维护&#xff0c;退役和回收等等&#xff0c;而软件测试的生命周期则是需求分析-测试计划-测试设计&…

对 Jenkins+ANT+Jmeter 接口测试的实践

目录 1、前言 2、框架与数据准备 3、脚本设计 4、整理测试报告 1、前言 JenkinsANTJMeter是一种常见的接口测试实践方案&#xff0c;可以实现自动化的接口测试和持续集成。Jenkins是一个流行的持续集成工具&#xff0c;ANT是一个构建工具&#xff0c;而JMeter是一个功能强大…

maven配置java outofmemory选项

在maven之中选择Add VM options&#xff0c;这样命令就多出来一个关于VM options配置的属性&#xff0c;此时就可以输入对于VM的设置

Ubuntu 放弃了战斗向微软投降

导读这几天看到 Ubuntu 放弃 Unity 和 Mir 开发&#xff0c;转向 Gnome 作为默认桌面环境的新闻&#xff0c;作为一个Linux十几年的老兵和Linux桌面的开发者&#xff0c;内心颇感良多。Ubuntu 做为全世界Linux界的桌面先驱者和创新者&#xff0c;突然宣布放弃自己多年开发的Uni…

jenkins实现easyswoole 持续集成/持续部署

jenkins环境jenkins需要使用root用户启动可通过修改 vim /etc/sysconfig/jenkins改为root,也可直接命令行root启动新增流水线项目安装远程构建插件Generic Webhook Trigger勾选触发远程构建保存之后,访问 /generic-webhook-trigger/invoke?tokeneasyswoole-test,即可自动bui…

【网络】协议的定制与Json序列化和反序列化

文章目录 应用层初识TCP协议通讯流程定制协议再谈协议网络版本计算器Protocal.hppCalServerCalClient Json的安装 应用层 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应用层 初识TCP协议通讯流程 建立链接和断开链接 基于TCP协议&#xff0c…

nginx相关

1、nginx无默认配置文件 参考文章&#xff1a;nginx配置失败&#xff0c;卸载后重装无 nginx.conf文件_haojuntu的博客-CSDN博客 2、nginx更改服务器的端口号 参考文章&#xff1a;https://www.cnblogs.com/chaosfe/p/16123585.html#:~:text%E6%88%91%E4%BB%AC%E6%9F%A5%E7%…

Java----使用eureka进行注册连接(微服务简单实现)

当采用微服务架构时&#xff0c;各个业务流程被逐一分解&#xff0c;虽说是分解&#xff0c;但还是要进行连接的&#xff0c;最简单的就是使用http请求&#xff0c;将他们联系起来&#xff0c;通过给容器注入restTemplate&#xff0c;然后使用内置的方法进行请求&#xff0c;但…

Java虚拟机(JVM)介绍

JVM是什么 JVM是Java Virtual Machine的缩写。它是一种基于计算设备的规范&#xff0c;是一台虚拟机&#xff0c;即虚构的计算机。 JVM屏蔽了具体操作系统平台的信息&#xff08;显然&#xff0c;就像是我们在电脑上开了个虚拟机一样&#xff09;&#xff0c;当然&#xff0c;J…

支付宝接入

支付宝接入 python-alipay-sdk pycryptodome一、电脑网站支付 1.1 获取支付宝密钥 沙箱网址 1.APPID 2.应用私钥 3.支付宝公钥1.2 存放密钥 在与 settings.py 的同级目录下创建 pem 文件夹pem 文件夹下创建 app_private_key.pem 和 alipay_public_key.pem app_private_key…