Vue中将input输入的小写字母转换成大写，并实时显示在input输入框上面

最新推荐文章于 2024-03-07 17:02:12 发布
最新推荐文章于 2024-03-07 17:02:12 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fsfsdgsdg/article/details/122924883
版权

思路：input输入框有个change事件，调用change事件获取到input输入的值，再在$nextTick中调用 toUpperCase方法，将其转换成大写

​
change：({value,column})=>{
    this.$nextTick(()=>{
        this.obj.socialCreditCode = value.toUpperCase();
    }
}

​

前端-卡布达
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 elementPlus input输入小写自动转为大写 vant限制输入
weixin_46463643的博客
08-29 1753
vue3 elementPlus input输入小写自动转为大写
vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
热门推荐
qq_42853685的博客
03-13 1万+
使用情景： 在文本框中输入内容，例如姓名 在页面中将姓名转化为姓名的拼音，包括大写拼音、小写拼音、首字母大写拼音、大写拼音缩写、小写拼音缩写 新建一个 pinyin.js 文件 这是一串又臭又长的unicode转化编码，附在文章末尾，大家记得带走 千万不能忘！！！ 继续操作 pinyin.js 粘贴完unicode转化编码后，在js文件中自定义指令 import Vue f...
Vue2 中通过自定义指令将字母转大写
最新发布
程邓楠的博客
03-07 453
Vue2 中通过自定义指令将字母转大写
Vue 字母自动转换成大写input框应用
weixin_44161385的博客
11-23 1373
<template> <div id="app"> <el-input v-model="test" placeholder="输入字母会自动转换成大写" clearable></el-input> </div> </template> <script> export default { name: 'App', data(){ return { .
Vue 使用户输入的字母自动转换成大写，并同步到数据
f18855666661的博客
07-02 5454
平时的业务中，有时需要将用户输入的字母直接转换成大写，并且同步到数据。我们可以使用 Vue computed 中的 get 和 set 完美的完成这个需求，看下面的代码实例： <template> <div id="app"> <el-input v-model="nameComputed" placeholder="输入字母会自动转换成大写" clearable></el-input> <.
vue input v-model输入实时转大写（vue watch深度监听）
JiaPeng366的博客
07-30 1521
最近写录入车牌号的功能，产品让实现输入字母自动转化为大写，其实这个很容易实现，也有很多种方法实现，我是在vue项目中写的，今天记录一下我的实现方式，顺便带出来一个知识点”深度监听“。 <div id="app"> <input v-model="addCarData.plateNumber" type="text" name=""> </div> data: { addCarData: { plateNumber: '' } }, watch: {
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ...
vue input 输入校验字母数字组合且长度小于30的实现代码
01-19
下面一段代码给大家分享vue input 校验字母数字组合且长度小于30，具体代码如下所示： <Input v-model=form.glhm placeholder=请输入关联交易号 style=width:240px @on-blur=validateJyh(form.glhm)></...
vue获取input输入值的问题解决办法
11-26
v-for里有多行input输入框，vue怎么获取某行的输入的值，随便写了点代码，意思就是后台返回了多行的list集合，页面显示多行输入框，当修改某行的值时进行校验，输入错误友好提示下，后边加个清空按钮，点击清空当前...
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split...
vue实现Input输入框模糊查询方法
12-13
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下 原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或...
vue input输入框关键字筛选检索列表数据展示
12-29
想必大家在项目开发中难免会用到关键字筛选的功能，正好这次项目有需求要做这一块，就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码： html： <!-- 筛选demo --> <input ...
vue 限制input只能输入正数的操作
11-19
在某些项目中 input 框只能输入数字，可以用以下办法： 先在标签上绑定上 @input 事件来监听标签的值变化，通过正则来改变输入的值。 <input class="keep_input" v-number-only style="width:35px" v-model...
vue表单验证之禁止input输入框输入空格
01-18
测试小姐姐让输入框不允许输入空格，安排。  刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端...
vue input输入框模糊查询的示例代码
12-29
Vue 模糊查询功能 原理：原生js的search() 方法，用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。 input输入框，模糊查询 <input type=...
vue判断input输入内容全是空格的方法
01-19
比如input中的数据和data中的msg双向绑定。 那么我们可以 判断先把msg以空格...以上这篇vue判断input输入内容全是空格的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
前端踩坑（五）(vue) element-ui 的表单重置，输入转大写/小写时 toUpperCase()、toLowerCase() undefined
TUTsmile的博客
11-29 3667
表单重置 表单重置的写法可以直接参考https://element.eleme.cn/#/zh-CN/component/form。 需要注意的点是 <el-from>需要:model，ref, 如<el-from :model="searchInfo" ref="searchInfoForm"> <el-from-item>需要prop 如<el-fr...
vue小写转大写
weixin_60906876的博客
06-19 564
var cnIntRadice = new Array("", "拾", "佰", "仟");var cnDecUnits = new Array("角", "分", "毫", "厘");var cnIntUnits = new Array("", "万", "亿", "兆");//分离金额后用的数组，预定义。//整数金额时后面跟的字符。//对应整数部分扩展单位。//输出的中文金额字符串。//超出最大处理数字。//对应小数部分单位。//整型完以后的单位。//获取整型部分转换。
el-input输入框字母自动转换大写
一名女程序猿的博客
12-08 460
给输入框加上一个 class就可以。
vue input 输入的字母自动转换成大写
09-03
### 回答1： 可以在 Vue 组件的 methods 中定义一个函数来监听 input 事件，在函数中调用 JavaScript 的 toUpperCase() 方法将输入的字母转换为大写。然后将转换后的值赋值给组件的数据。 例如: ``` <template> <div> <input v-model="inputValue" @input="changeToUpperCase"/> </div> </template> <script> export default { data() { return { inputValue: '' } }, methods: { changeToUpperCase() { this.inputValue = this.inputValue.toUpperCase() } } } </script> ``` 监听 input 事件，并调用 changeToUpperCase 方法，将输入的字母转换为大写。 ### 回答2： 要实现Vue中输入的字母自动转换成大写，可以使用v-model指令和一个自定义过滤器。 首先，在需要输入的input标签上使用v-model指令进行双向绑定，将输入值绑定到一个data中的变量上。例如： ```html <input v-model="inputValue" /> ``` 然后，在Vue实例中定义一个自定义的过滤器，用来将输入的字母转换为大写。例如： ```javascript filters: { uppercase(value) { return value.toUpperCase(); } } ``` 接下来，在需要展示输入结果的地方，使用过滤器将绑定的变量进行转换，并在其中显示。例如： ```html <div>{{ inputValue | uppercase }}</div> ``` 这样，输入的字母就会自动转换为大写并显示在页面上。 完整的代码示例： ```html <template> <div> <input v-model="inputValue" /> <div>{{ inputValue | uppercase }}</div> </div> </template> <script> export default { data() { return { inputValue: "" }; }, filters: { uppercase(value) { return value.toUpperCase(); } } }; </script> ``` 这样，当在输入框中输入小写字母时，会自动转换为大写，并在下方显示。 ### 回答3： 在Vue中，可以使用v-model指令和计算属性，轻松实现输入框中输入的字母自动转换成大写。 首先，我们将v-model指令应用在输入框上，绑定一个变量，比如"inputText"，用于存储用户输入的值。 ```html <input v-model="inputText" type="text"> ``` 然后，我们可以创建一个计算属性，将该变量的值转换为大写。 ```javascript computed: { transformedText: function() { return this.inputText.toUpperCase(); } } ``` 在上述代码中，我们创建了一个计算属性"transformedText"，它返回绑定的变量"inputText"的值经过toUpperCase()方法转换为大写后的结果。 最后，我们在模板中使用这个计算属性来显示转换后的值。 ```html <p>{{ transformedText }}</p> ``` 这样，无论用户在输入框中输入什么字母，它们都会被自动转换为大写并显示在页面上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值