vue页面中想在input框用户输入的参数后加单位的方法

最新推荐文章于 2023-11-20 09:35:03 发布
最新推荐文章于 2023-11-20 09:35:03 发布
阅读量876 收藏
点赞数
文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43193513/article/details/132489185
版权 
			<el-form-item label="金重" prop="weight">
              <el-input v-model="form.weight" placeholder="请输入金重">
                <template #append>
                  <div>g</div>
                </template>
              </el-input>
            </el-form-item>

在这里插入图片描述

帅过二硕ฅ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element输入框中显示单位_vue element-ui实现input输入框金额数字添加千分位
weixin_39656206的博客
12-21 2016
vue element-ui实现input输入框金额数字添加千分位发布时间：2020-01-03 19:14来源：互联网当前栏目：web技术类在util.js中定义方法包含金额添加过滤千分位，验证金额格式等const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;// 金额添加千分位const comdify = function (n) {if(...
vue在input框后面添加单位
qq_22905801的博客
03-13 2581
【代码】vue在input框后面添加单位。
实现输入框后带固定单位
weixin_30770495的博客
08-10 986
1 <!DOCTYPE> 2 <html > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 7 .combo { 8 ...
实现el-input-number数字框带单位
最新发布
weixin_45313351的博客
11-20 881
实现的效果展示，可以是前缀单位，也可以是后缀单位。实现的思路就是动态修改伪元素 ::before 和 ::after 的 content值。
vue 给数值后面添加单位
lfl18326162160的博客
07-13 236
使用em来进行添加。
input文本框后面添加单位
weixin_46596863的博客
04-17 955
【代码】input文本框后面添加单位。
vue 大数字加单位+时间戳转换单位
愤怒的阿木木的博客
04-08 462
<span style="color: #676767;font-size: 12px">播放：{{playvolume(getPlaylistDetail.playCount)}}</span>//大数字 <span style="color: #676767;font-size: 12px;">最近更新：{{unixTimeToDate(getPlaylistDetail.updateTime)}}</span>//时间戳 methods: ..
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
10-14
主要介绍了使用Vue-scroller页面input框不能触发滑动的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue判断input输入内容全是空格的方法
01-19
比如input中的数据和data中的msg双向绑定。 那么我们可以 判断先把msg以空格拆分成数组，然后拼接起来，判断字符串的长度，如果长度为0，证明输入的就全是空格了，如下： msg.split( ).join().length = 0 以上这...
vue.js input框之间赋值方法
10-18
今天小编就为大家分享一篇vue.js input框之间赋值方法具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuejs 动态添加input框的实例讲解
10-18
今天小编就为大家分享一篇vuejs 动态添加input框的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 限制input只能输入正数的操作
11-19
在某些项目中 input 框只能输入数字，可以用以下办法： 先在标签上绑定上 @input 事件来监听标签的值变化，通过正则来改变输入的值。 <input class="keep_input" v-number-only style="width:35px" v-model...
解决vue中监听input只能输入数字及英文或者其他情况的问题
01-19
input placeholder=请输入条形码 class=disPriceStyle v-model = 'searcBarCode'></input>、 （只能输入数字，英文) <input placeholder=请输入商品条形码 class=disPriceStyle maxlength=20 v-model = ...
vue指令只能输入正数并且只能输入一个小数点的方法
12-07
最近在做一个金额查询，验证的时候总是出现很多问题，如输入-号后，input框里是没有了，但是在model里还是绑定了，提交的时候就会报错，真的是让人很是郁闷，小数点也是input框过滤掉了，但是提交的时候也会出现。...
自定义金额input输入框后加单位及input输入框限制处理
weixin_44935752的博客
12-30 2466
在开发V钻充值模块时，遇到自定义充值模块–自定义金额输入框，发现这块内容的要求较多较复杂，在踩过很多坑后，特此分享经验给大家： 要求一：点击后出现光标及单位名称，数字键盘从下而上弹出，去支付按钮随之上移。输入数字后，去支付按钮人民币数额同步变化为相应数字； 1.通过input输入框可实现点击后出现光标，且数字键盘从下而上弹起，去支付按钮随之上移（此处为css实现，不多概述），需要注意的是，input里的value初始值为“自定义面额” 2.点击后出现单位名称“V钻” 我们不能在点击自定义面额按钮后，将i
vue+element+在输入框末端加单位
weixin_43961652的博客
12-13 3896
要求：写一个体积，加上m³的单位 elementUI文档里只写了带图标的，没有自定义单位，其实也可以用suffix插槽来实现，但是放进来的位置是顶着右上角，而且是斜体，所以需要用样式来修改一下 代码如下 <el-col :span="8"> 总体积 <el-input v-model="totalCBM" type="input" :disabled="true" class="total-input" style="width: 80%;">
vue设置input与按钮在一行_vue+css：制作todo事项（待办事项）的代码解析
weixin_39947306的博客
01-21 2375
1 效果图：2 环境：======2.1 谷歌浏览器：强调这一点，是因为css设置中，并没有对浏览器兼容问题进行代码设置，主要是突出重点。2.2 微软编辑器vscode：用于代码编写。3 知识点：===代码注释中有说明===3.1 html基础知识。3.2 css基础知识。3.3 vue基础知识。===开始===4 html基础框架： vue-note ...
表单某一项加单位
m0_68428581的博客
05-16 713
1.实现效果2.具体方法：在input输入框内加入m²即可
vue.js页面中有多个input搜索框如何实现防抖操作
05-01
在vue.js页面中，当有多个input搜索框需要实现防抖操作时，可以使用以下方法： 1. 使用lodash库提供的_.debounce()函数。该函数可以将一些被频繁调用的函数在规定时间内只执行一次。将需要进行防抖的搜索函数作为debounce函数的参数即可。但是，如果页面中有多个搜索框需要实现防抖操作，每个搜索框都需要调用该debounce函数，代码重复，不够优雅。 2. 使用vue.js的mixin混入功能。将防抖操作的代码封装到一个mixin混入对象中，然后在需要的组件中配置该mixin，即可实现防抖操作。这种方法更加优雅，代码结构更加清晰。 下面是一个搜索组件的样例代码： ```vue <template> <div> <input type="text" v-model="searchText" @input="debounceSearch"/> <ul> <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li> </ul> </div> </template> <script> import searchMixin from 'searchMixin.js' // 引入定义好的mixin混入对象 export default { name: 'Search', mixins: [searchMixin], // 在组件中引用该mixin data () { return { searchText: '', searchResults: [], } }, methods: { search () { // 搜索逻辑 this.searchResults = [] if (this.searchText) { this.searchResults = [ {id: 1, name: 'result1'}, {id: 2, name: 'result2'}, // ... ] } }, }, mounted () { console.log('search component mounted') } } </script> ``` searchMixin.js： ```javascript import _ from 'lodash' export default { methods: { debounceSearch: _.debounce(function () { this.search() }, 500) } } ``` 在以上样例代码中，searchMixin.js中定义了一个防抖操作函数debounceSearch，将需要防抖的搜索函数search作为debounce函数的参数。组件中引用了该mixin，在input的@input事件中调用debounceSearch函数实现防抖操作。这样，当用户在搜索框中快速输入时，搜索函数search不会被频繁调用，而是在规定的时间间隔内只会执行一次，节省了系统资源，提高了性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值