前言:小写转大写,可以用过滤器实现,但当使用 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