前言&＃xff1a;小写转大写&＃xff0c;可以用过滤器实现&＃xff0c;但当使用 v-model 时就不行了&＃xff0c;这里有解决方案。转载请注明出处&＃xff1a;https://www.cnblogs.com/yuxiaole/p/9289205.html
网站地址&＃xff1a;我的个人vue&＃43;element ui demo网站
github地址&＃xff1a;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
京公网安备 11010802041100号