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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
浅谈React高阶组件
Mar 28 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
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
php编写简单的文章发布程序
2015/06/18 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
使用angular写一个hello world
2015/01/23 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python NumPy库安装使用笔记
2015/05/18 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
金智子午JAVA面试题
2015/09/04 面试题
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书