輸入框中小寫字母自動轉換為大寫
網站地址：我的個人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>