Vue 将输入框的输入的小写自动转大写（使用 v-model 时采取另一种方式）
输入框中小写字母自动转换为大写
网站地址：我的个人vue+element ui demo网站
github地址：yuleGH github
-
过滤器实现
<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>
