前言：小写转大写，可以用过滤器实现，但当使用 v-model 时就不行了，这里有解决方案。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9289205.html
可以采用过滤器实现
<html> <head> <title>测试</title> </head> <body> <div id="app"> <input id="val1" v-model="value1"> <br/> 显示小写转大写 ： {{ value1 | upper}} </div> <!-- 引入组件库 --> <script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { value1: "" }, filters: { upper: function (value) { if (!value) return ''; value = value.toString(); return value.toUpperCase(); } } }); </script> </body> </html>
v-model 中的实现
如果想要在使用 v-model 时，也要大写转小写，就不能喝 filter 结合，因为这会报错，这时应该换换种实现方式。可以采用计算属性。
<html> <head> <title>测试</title> </head> <body> <div id="app"> 输入框中直接输入小写转大写： <input v-model="value2Computed"> </div> <!-- 引入组件库 --> <script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { value2: "" }, computed : { value2Computed : { get: function(){ return this.value2; }, set : function(val){ this.value2 = val.toUpperCase(); } } } }); </script> </body> </html>
转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9289205.html