Vue ElementPlus Input 输入框

Input  输入框


通过鼠标或键盘输入字符

input 为受控组件,它总会显示 Vue 绑定值。

通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变,不支持 v-model 修饰符。

基础用法

<template><el-input v-model="input" placeholder="请输入内容"></el-input>
</template><script>import { defineComponent, ref } from 'vue'export default defineComponent({setup() {return {input: ref(''),}},})
</script>
<el-input 
v-model="user.name" 
prefix-icon="UserFilled" 
placeholder="请输入账号" 
clearable
>
</el-input><el-input 
v-model="user.password" 
prefix-icon="Lock" 
placeholder="请输入密码" 
clearable 
show-password
>
</el-input><script>
export default ({data() {return{user:{name: '',password: '' }}},methods:{}
})
</script>

可清空


 使用clearable属性即可得到一个可清空的输入框

<template><el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
</template><script>import { defineComponent, ref } from 'vue'export default defineComponent({setup() {return {input: ref(''),}},})
</script>

密码框


使用show-password属性即可得到一个可切换显示隐藏的密码框 

<template><el-input placeholder="请输入密码" v-model="input" show-password></el-input>
</template><script>import { defineComponent, ref } from 'vue'export default defineComponent({setup() {return {input: ref(''),}},})
</script>

带 icon 的输入框


带有图标标记输入类型

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。 

<template><div class="demo-input-suffix">属性方式:<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"v-model="input2"></el-input>
</div>
<div class="demo-input-suffix">slot 方式:<el-input placeholder="请选择日期" v-model="input3"><template #suffix><i class="el-input__icon el-icon-date"></i></template></el-input><el-input placeholder="请输入内容" v-model="input4"><template #prefix><i class="el-input__icon el-icon-search"></i></template></el-input>
</div>
</template><script>import { defineComponent, ref } from 'vue'export default defineComponent({setup() {return {input1: ref(''),input2: ref(''),input3: ref(''),input4: ref(''),}},})
</script>
<style>.demo-input-label {display: inline-block;width: 130px;}
</style>

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

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

相关文章

【环境变量】命令行参数 | 概念 | 理解 | 命令行参数表 | bash进程

目录 四组概念 命令行参数概念&理解 查看命令函参数 命令行字符串&命令行参数表 命令行参数存在的意义 谁形成的命令行参数 父进程&子进程&数据段 bash进程 最近有点小忙&#xff0c;可能更新比较慢。 四组概念 竞争性: 系统进程数目众多&#xff0c…

docker------docker入门

&#x1f388;个人主页&#xff1a;靓仔很忙i &#x1f4bb;B 站主页&#xff1a;&#x1f449;B站&#x1f448; &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;Linux &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#…

postgis 建立路径分析,使用arcmap处理路网数据,进行拓扑检查

在postgresql+postgis上面,对路网进行打断化简,提高路径规划成功率。 一、创建空间库以及空间索引 CREATE EXTENSION postgis; CREATE EXTENSION pgrouting; CREATE EXTENSION postgis_topology; CREATE EXTENSION fuzzystrmatch; CREATE EXTENSION postgis_tiger_geocoder;…

软件架构风格_4.虚拟机体系结构风格

虚拟机体系结构风格的基本思想是人为构建一个运行环境&#xff0c;在这个环境之上&#xff0c;可以解析与运行自定义的一些语言&#xff0c;这样来增加架构的灵活性。虚拟机体系结构风格主要包括解释器风格和规则系统风格。 1.解释器体系结构风格 一个解释器通常包括完成解释工…

正则表达式与JSON序列化:去除JavaScript对象中的下划线键名

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

鸿蒙南向开发实战:【智能窗帘】

样例简介 智能窗帘设备不仅接收数字管家应用下发的指令来控制窗帘开启的时间&#xff0c;而且还可以加入到数字管家的日程管理中。通过日程可以设定窗帘开关的时间段&#xff0c;使其在特定的时间段内&#xff0c;窗帘自动打开或者关闭&#xff1b;通过日程管家还可以实现窗帘…

算法练习—day1

title: 算法练习—day1 date: 2024-04-03 21:49:55 tags: 算法 categories:LeetCode typora-root-url: 算法练习—day1 网址&#xff1a;https://red568.github.io 704. 二分查找 题目&#xff1a; 题目分析&#xff1a; 左右指针分别为[left,right]&#xff0c;每次都取中…

上位机图像处理和嵌入式模块部署(qmacvisual亮度检测)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们说过&#xff0c;在机器视觉当中&#xff0c;对于光源的处理要非常小心。这里面不仅包括了选择什么样的光源&#xff0c;还取决于怎样使用…

javaWeb旅游网站设计

一、概述 1.1 项目研究背景 社会经济的发展和提高潜移默化的影响了人们对精神消费的日益看中与提高&#xff0c;所以越来越多的人们开始选择更健康有趣的生活活动&#xff0c;随之而来的旅游便成了人们消费的必选。随着旅客需求的日趋丰富和个性化&#xff0c;这势必将推动我…

搜索二叉树

目录 搜索二叉树的概念 二叉搜索树的遍历 二叉搜索树的模拟实现 Find查找函数 Insert插入函数 Erase删除函数 case 1&#xff1a; case 2&#xff1a; 待删除结点左孩子不存在&#xff0c;右孩子存在 待删除结点左孩子存在&#xff0c;右孩子不存在 case 3&#xff1a;…

easyExcel 模版导出 中间数据纵向延伸,并且对指定列进行合并

想要达到的效果 引入maven引用 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.2.1</version></dependency> 按照要求创建模版 备注 : 模板注意 用{} 来表示你要用的变量 如果本…

C#使用Selenium驱动Chrome浏览器

1.Selenium库依赖安装 Selenium WebDriver是Selenium项目的一部分&#xff0c;用于模拟用户在Web应用程序中的交互操作。它支持多种浏览器&#xff0c;如Chrome、Firefox、IE等&#xff0c;且与各种编程语言&#xff08;如Java、Python、C#等&#xff09;兼容&#xff0c;具有…

RUST语言流控制语句使用示例

1.判断语句 单条件判断: let mut x128;//声明一个32位整数x512;//修改变量原来的值为新值//如果 ... 否则//判断变量x是否大于256if x>256 {println!("x>256,x{}",x);}else {println!("x<256,x{}",x);}let is_ok:bool true;//rust中不用()if i…

pytest--python的一种测试框架--接口测试

接口测试 工具&#xff1a; POSTMAN&#xff1b; 接口选择&#xff1a; 豆瓣电影&#xff0c;进制数据 POSTMAN下载&#xff1a; 1.POSTMAN官网&#xff1a;https://www.postman.com/products/&#xff1b; 2.点product选Download Postman 下载完之后双击打开就可以用的。…

【TI毫米波雷达】IWR6843AOP的官方文件资源名称BUG,选择xwr68xx还是xwr64xx,及需要注意的问题

【TI毫米波雷达】IWR6843AOP的官方文件资源名称BUG&#xff0c;选择xwr68xx还是xwr64xx&#xff0c;及需要注意的问题 文章目录 demo工程out_of_box文件调试bin文件名称需要注意的问题附录&#xff1a;结构框架雷达基本原理叙述雷达天线排列位置芯片框架Demo工程功能CCS工程导…

ETL工具-nifi干货系列 第八讲 处理器PutDatabaseRecord 写数据库(详细)

1、本节通过一个小例子来讲解下处理器PutDatabaseRecord&#xff0c;该处理器的作用是将数据写入数据库。 如下流程通过处理器GenerateFlowFile 生成数据&#xff0c;然后通过处理器JoltTransformJSON转换结构&#xff0c;最后通过处理器PutDatabaseRecord将数据写入数据库。如…

一些题目学习

1.打开文件添加helloworld public class Saier {public static void main(String[] args){String path"C:\\Users\\sjg\\Desktop\\abc.txt";String text"hello world";try {File file new File(path);FileWriter fileWriter new FileWriter(file,true);…

AI绘图:Stable Diffusion WEB UI 详细操作介绍:基础篇

接上一篇《AI绘图体验&#xff1a;Stable Diffusion本地化部署详细步骤》本地部署完了SD后&#xff0c;大家肯定想知道怎么用&#xff0c;接下来补一篇Stable Diffusion WEB UI 详细操作&#xff0c;如果大家还没有完成SD的部署&#xff0c;请参考上一篇文章进行本地化的部署。…

Emacs之解除comment-region绑定C-c C-c快捷键(一百三十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

【学习心得】Numpy学习指南或复习手册

本文是自己在学习Numpy过后总是遗忘的很快&#xff0c;反思后发现主要是两个原因&#xff1a; numpy的知识点很多&#xff0c;很杂乱。练习不足&#xff0c;学习过后一段时间不敲代码就会忘记。 针对这两个问题&#xff0c;我写了这篇文章。希望将numpy的知识点织成一张网&…