vue用elementui写form表单时,在label里添加空格操作


Posted in Javascript onAugust 13, 2020

vue用elementui写form表单时,在label里添加空格操作

要在密码两字中间添加空格,发现直接添加  是识别不了的,正确写法为:

vue用elementui写form表单时,在label里添加空格操作

代码:

<el-form-item label="密 码:" :label-width="formLabelWidth" prop="password">
   <label slot="label">密    码:</label>
   <el-input
    type="password"
    v-model="FormData.password"
    placeholder="请输入密码"
    autocomplete="off"
    show-password
   ></el-input>
   </el-form-item>

补充知识:vue + elementUI 给input输入框添加 字体小图标

基于vue框架,使用element-ui组件库写表单效果,需要添加字体小图标,效果如下:

vue用elementui写form表单时,在label里添加空格操作

1.只需要添加prefix-icon="iconfont icon-xxx"即可(头部插入)

//例如
<el-input 
 prefix-icon="iconfont icon-sousuo" 
 v-model="searchTableInfo" 
 placeholder="请输入姓名" 
 style="width:240px"
></el-input>

2.添加suffix-icon=“iconfont icon-xxx”(尾部添加)

//例如
<el-input 
 suffix-icon="iconfont icon-sousuo" 
 v-model="searchTableInfo" 
 placeholder="请输入姓名" 
 style="width:240px"
></el-input>

以上这篇vue用elementui写form表单时,在label里添加空格操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
js数组去重的hash方法
Dec 22 Javascript
vue模板语法-插值详解
Mar 06 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery中event.target和this的区别详解
Aug 13 #jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 #Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 #Javascript
Postman参数化实现过程及原理解析
Aug 13 #Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 #Javascript
vue路由分文件拆分管理详解
Aug 13 #Javascript
Postman环境变量全局变量使用方法详解
Aug 13 #Javascript
You might like
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php网页病毒清除类
2014/12/08 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python实现简易Web爬虫详解
2018/01/03 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python删除字符串中指定字符的方法
2018/08/13 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
基于python调用psutil模块过程解析
2019/12/20 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
2014年艾滋病防治工作总结
2014/12/10 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
Python代码实现双链表
2022/05/25 Python