Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup

如果你正在使用 Vue 3 和 Composition API,你可以使用 setup 函数来实现 Element Plus 的 Input 组件在点击查看按钮时不可编辑,点击编辑按钮时可编辑的功能。

以下是一个使用 setup 的示例代码:

<template><div><el-input v-model="inputValue" :disabled="isDisabled"></el-input><el-button @click="toggleEdit">{{ isDisabled ? '编辑' : '查看' }}</el-button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const inputValue = ref('');const isDisabled = ref(true);function toggleEdit() {isDisabled.value = !isDisabled.value;}return {inputValue,isDisabled,toggleEdit};}
};
</script>

在上述示例中,我们使用了 ref 函数来创建 inputValueisDisabled 变量,并在 setup 函数中返回它们。通过在模板中绑定 v-model 指令和 :disabled 属性,我们可以动态地控制输入框是否可编辑。

在按钮的点击事件处理函数 toggleEdit 中,我们只需要修改 isDisabled 变量的值,输入框的可编辑

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

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

相关文章

Pytorch目标分类深度学习自定义数据集训练

目录 一&#xff0c;Pytorch简介&#xff1b; 二&#xff0c;环境配置&#xff1b; 三&#xff0c;自定义数据集&#xff1b; 四&#xff0c;模型训练&#xff1b; 五&#xff0c;模型验证&#xff1b; 一&#xff0c;Pytorch简介&#xff1b; PyTorch是一个开源的Python机…

淘宝商品数据分析接口,淘宝商品详情数据接口

淘宝商品数据分析接口可以通过淘宝API进行获取。 淘宝API是一种程序接口&#xff0c;通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问淘宝平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现淘宝平台的数据开放。 通过淘宝API提供的…

外卖小程序源码的安全性和隐私考虑

外卖小程序源码的使用正在成为数字餐饮业的主流选择之一。然而&#xff0c;随着外卖业务的增长&#xff0c;安全性和隐私保护变得至关重要。在本文中&#xff0c;我们将探讨外卖小程序源码的安全性和隐私问题&#xff0c;并提供一些代码示例&#xff0c;以帮助开发者确保其应用…

【改造先序遍历】222. 完全二叉树的节点个数

222. 完全二叉树的节点个数 解题思路-先序 直接改造先序遍历算法针对一个节点 如果节点为空 那么直接返回0其余交给递归 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* …

回顾C++

大一的时候学过C&#xff0c;当时学得也不深&#xff0c;考试也是糊弄过去的&#xff0c;最近刷力扣的时候&#xff0c;决定一边刷题&#xff0c;一边复习和学习C&#xff0c;在此记录一些C的知识点。反正遇到一点就记录一点&#xff0c;会一直更新。

c++解压压缩包文件

功能实现需要依赖相关头文件和库文件&#xff0c;我这里的是64位的。需要的可以在这下载&#xff1a;https://download.csdn.net/download/bangtanhui/88403596 参考代码如下&#xff1a; #include <zip.h> #pragma comment(lib,"libzip.lib")//解压压缩包 /…

【C++ techniques】Smart Pointers智能指针

Smart Pointers智能指针 看起来、用起来、感觉起来像内置指针&#xff0c;但提供更多的机能。拥有以下各种指针行为的控制权&#xff1a; 构造和析构&#xff1b;复制和赋值&#xff1b;解引。 Smart Pointers的构造、赋值、析构 C的标准程序库提供的auto_ptr template: au…

BEVFormer代码跑通

1 环境配置 1.1 环境安装 # 1 拉取源码 github加速代理https://ghproxy.com/ git clone https://github.com/fundamentalvision/BEVFormer.git# 2 创建虚拟环境 conda create -n bev python3.8 -y# 3 激活虚拟环境 conda activate bev# 4.1 安装torch,torchvision,torchaud…

性能测试笔记

一、性能测试的概念 性能测试的概念 使用自动化工具&#xff0c;模拟不同的场景&#xff0c;对软件各项性能指标进行测试和评估的过程 性能测试的目的 评估当前系统能力&#xff0c;出现性能bug后&#xff0c;优化性能&#xff1a;预测未来的性能需求是否满足 例如&#xf…

Web:前端常用的几种Http请求GET和POST样例

1、简述 在Web开发过程中&#xff0c;少不了发起Http请求服务端的接口数据&#xff0c;在不同的框架中使用了不同的Http请求方式&#xff0c;常用的请求有fetch、 ajax、 axios、XMLHttpRequest、request&#xff0c;以下样例仅供参考。 2、Fetch Fetch API 是一种 JavaScr…

Vue Router(二)

目录 一、嵌套路由 1、路由定义 2、代码例子 3、重定向 二、懒加载 1、缘由 2、代码例子 三、导航守卫 1、全局前置守卫 2、全局后置守卫 3、meta元信息 四、生命周期 1、解释 2、执行顺序 3、例子 五、keep-alive组件缓存&#xff08;保活&#xff09; 1、介…

【目标检测】——PE-YOLO精读

yolo&#xff0c;暗光目标检测 论文&#xff1a;PE-YOLO 1. 简介 卷积神经网络&#xff08;CNNs&#xff09;在近年来如何推动了物体检测的发展。许多检测器已经被提出&#xff0c;而且在许多基准数据集上的性能正在不断提高。然而&#xff0c;大多数现有的检测器都是在正常条…

HTTPS 加密工作过程

引言 HTTP 协议内容都是按照文本的方式明文传输的&#xff0c;这就导致在传输过程中出现一些被篡改的情况。例如臭名昭著的运营商劫持。显然&#xff0c; 明文传输是比较危险的事情&#xff0c;为此引入 HTTPS &#xff0c;HTTPS 就是在 HTTP 的基础上进行了加密, 进一步的来保…

九、互联网技术——记忆背诵

文章目录 一、网络操作系统的功能和特性二、网络操作系统的逻辑构成四、主动攻击和被动攻击五、安全机制和安全服务六、信息与数据七、数据处理与数据管理八、数据模型九、概念模型的E-R表示方法十、四种数据模型十一、数据库系统组成十二、DBMS主要功能十三、数据库系统的3级模…

【C++初阶(二)C——C++过渡必看】

文章目录 前言一、C关键字&#x1f34e;二、命名空间&#x1f345;1.命名空间的定义&#x1f352;2.命名空间使用&#x1f353; 三、C输入&输出&#x1f351;四、缺省参数&#x1fad1;1. 缺省参数概念&#x1f349;2. 缺省参数分类&#x1f95d; 五、函数重载&#x1f965…

集中发现服务DCPSInfoRepo通信端口和ORB交互流程

OpenDDS集中发现服务DCPSInfoRepo,为OpenDDS的pub和sub通信终端提供主题匹配和通信协商和中介服务,是基于TAO的ORB机制完成的,GIOP协议。 1、集中发现服务DCPSInfoRepo的相关通信端口 1)集中发现服务DCPSInfoRepo通信端口 DCPSInfoRepo -ORBListenEndpoints iiop://192.…

【maven】idea中基于maven-webapp骨架创建的web.xml问题

IDEA中基于maven-webapp骨架创建的web工程&#xff0c;默认的web.xml是这样的。 <!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name…

mac文件为什么不能拖进U盘?

对于Mac用户来说&#xff0c;可能会遭遇一些烦恼&#xff0c;比如在试图将文件从Mac电脑拖入U盘时&#xff0c;却发现文件无法成功传输。这无疑给用户带来了很大的不便。那么&#xff0c;mac文件为什么不能拖进U盘&#xff0c;看完这篇你就知道了。 一、U盘的读写权限问题 如果…

Flutter笔记:build方法、构建上下文BuildContext解析

Flutter笔记 build 方法解析 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/133556333 本文主要介绍Flu…

模拟滤波器的基础知识和设计

信号处理工作中滤波器的应用是非常广泛的&#xff0c;可以分成模拟滤波器和数字滤波器两种&#xff0c;数字滤波器主要包括两种&#xff0c;IIR和FIR&#xff0c;这两种滤波器后面统一说&#xff0c;今天先来说一说模拟滤波器&#xff08;主要是我先用Python实现了Matlab书里面…