热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue如何将输入框的输入自动小写转大写(使用vmodel时采取另一种方式)

前言:小写转大写,可以用过滤器实现,但当使用v-model时就不行了,这里有解决方案。转载请注明出处:http

前言:小写转大写,可以用过滤器实现,但当使用 v-model 时就不行了,这里有解决方案。转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9289205.html

网站地址:我的个人vue+element ui demo网站    

github地址:yuleGH github

 

可以采用过滤器实现

<html><head><title>测试title>
head>
<body>
<div id&#61;"app"><input id&#61;"val1" v-model&#61;"value1"><br/>显示小写转大写 &#xff1a; {{ value1 | upper}}div>

<script type&#61;"text/Javascript" src&#61;"${ctx}/static/common/js/vue.js">script><script type&#61;"text/Javascript">new Vue({el: "#app",data: {value1: ""},filters: {upper: function (value) {if (!value) return &#39;&#39;;value &#61; value.toString();return value.toUpperCase();}}});
script>body>html>

v-model 中的实现

  如果想要在使用 v-model 时&#xff0c;也要大写转小写&#xff0c;就不能喝 filter 结合&#xff0c;因为这会报错&#xff0c;这时应该换换种实现方式。可以采用计算属性

<html><head><title>测试title>
head>
<body>
<div id&#61;"app">输入框中直接输入小写转大写&#xff1a;<input v-model&#61;"value2Computed">
div>

<script type&#61;"text/Javascript" src&#61;"${ctx}/static/common/js/vue.js">script><script type&#61;"text/Javascript">new Vue({el: "#app",data: {value2: ""},computed : {value2Computed : {get: function(){return this.value2;},set : function(val){this.value2 &#61; val.toUpperCase();}}}});
script>body>html>

 form表单中实现&#xff0c;加上校验

  form表单中实现同v-model&#xff0c;不过校验的 trigger 得是 change。

<html><head><title>测试title><link rel&#61;"stylesheet" href&#61;"../lib/elementui/theme-chalk/index.css" type&#61;"text/css">
head>
<body>
<div id&#61;"app">3、form表单中 有校验、并且小写转大小&#xff1a;trigger: &#39;change&#39;<el-form :model&#61;"ruleForm" :rules&#61;"rules"><el-form-item label&#61;"名称&#xff08;必须包含123&#xff09;" prop&#61;"name"><el-input v-model&#61;"nameComputed">el-input>el-form-item>el-form>
div>

<script type&#61;"text/Javascript" src&#61;"../lib/vue.js">script>
<script type&#61;"text/Javascript" src&#61;"../lib/elementui/index.js">script><script type&#61;"text/Javascript">var validateName &#61; (rule, value, callback) &#61;> {if (value.indexOf("123") &#61;&#61; -1) {callback(new Error(&#39;请输入包含123&#39;));} else {callback();}};new Vue({el: "#app",data: {ruleForm : {name : ""},rules : {&#39;name&#39; : [{ required: true, message: &#39;请输入名称&#39;, trigger: &#39;change&#39; },{ min: 3, max: 5, message: &#39;长度在 3 到 5 个字符&#39;, trigger: &#39;change&#39; },{ validator: validateName, trigger: &#39;change&#39; }]}},computed : {nameComputed : {get: function(){return this.ruleForm.name;},set : function(val){this.ruleForm.name &#61; val.toUpperCase();}}}});
script>body>html>

 

转载请注明出处&#xff1a;https://www.cnblogs.com/yuxiaole/p/9289205.html

 

转:https://www.cnblogs.com/yuxiaole/p/9289205.html



推荐阅读
  • 本文详细介绍如何在ElementUI中实现自定义表单验证规则,包括两种不同的实现方式及其应用场景。 ... [详细]
  • MySQL中的Anemometer使用指南
    本文详细介绍了如何在MySQL环境中部署和使用Anemometer,以帮助开发者有效监控和优化慢查询性能。通过本文,您将了解从环境准备到具体配置的全过程。 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现数据的双向绑定,包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]
  • 对 manual_async_fn 进行了改进,确保其能够正确处理和捕获输入的生命周期。 ... [详细]
  • 博主从零开始学习HTML(入门基础)
    从零开始学习HTML(入门基础)互联网三大基石HTTP协议URL:统一资源定位符HTML:超文本标记语言HTML的Head标签中的常用元素&amp;lt;!--告知 ... [详细]
  • 本文介绍了一种算法,用于从一个整数的末尾获取第 K 位数字。如果该位置不存在,则返回 -1。 ... [详细]
  • 图像分类算法的优化策略与实践
    本文探讨了《Bag of Tricks for Image Classification with Convolutional Neural Networks》论文中的多项技术,旨在通过具体实例和实验验证,提高卷积神经网络在图像分类任务中的性能。文章详细介绍了从模型训练加速、网络结构调整到训练参数优化等多个方面的改进方法。 ... [详细]
  • 开发笔记:图像分割基于阙值+边缘检测+区域法图像分割matlab源码含GUI
    开发笔记:图像分割基于阙值+边缘检测+区域法图像分割matlab源码含GUI ... [详细]
  • 择要:Fundebug的JavaScript毛病监控插件同步支撑Vue.js异步毛病监控。Vue.js从降生至今已5年,尤大在本年2月份宣布了严重更新,即Vue2.6。更新包含新增 ... [详细]
  • 本文详细记录了腾讯ABS云平台的一次前端开发岗位面试经历,包括面试过程中遇到的JavaScript相关问题、Vue.js等框架的深入探讨以及算法挑战等内容。 ... [详细]
  • 58同城的Elasticsearch应用与平台构建实践
    本文由58同城高级架构师于伯伟分享,由陈树昌编辑整理,内容源自DataFunTalk。文章探讨了Elasticsearch作为分布式搜索和分析引擎的应用,特别是在58同城的实施案例,包括集群优化、典型应用实例及自动化平台建设等方面。 ... [详细]
  • 深入理解任意分频技术及其在FPGA中的应用
    本文探讨了FPGA中任意分频的重要性,特别是其在高频精确控制中的应用。文章不仅介绍了传统的分频方法,还详细阐述了一种基于DDS(直接数字合成)相位累加器的高精度任意分频技术,旨在为工程师和爱好者提供一种新的思路。 ... [详细]
  • 文章目录17、less17-UpdateQuery-Errorbased-String18、less18-HeaderInjection-ErrorBased-string19、l ... [详细]
  • 本文详细探讨了一道涉及算法、C++及图论知识点的题目,适合对算法竞赛感兴趣的读者。通过分析题目【这是一道大水题】,我们将探索如何高效地处理区间查询与更新问题。本文由技术作者【ღCauchyོꦿ࿐】撰写,旨在帮助读者掌握相关技术和解题技巧。 ... [详细]
  • 漫水填充算法是一种基于特定颜色填充连通区域的技术,通过设定像素连通性的阈值和连通模式,可以实现不同的填充效果。该算法广泛应用于图像处理领域,如图像分割、标记特定区域等。 ... [详细]
author-avatar
Cri_Hello
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有