Vue 将输入框的输入的小写自动转大写（使用 v-model 时采取另一种方式）

最新推荐文章于 2024-09-19 09:41:07 发布

原创最新推荐文章于 2024-09-19 09:41:07 发布 · 6.8k 阅读

7 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#小写转大写 #vue 小写转大写 #toUpperCase #输入框输入小写自动转大写

Web FrontEnd 同时被 2 个专栏收录

226 篇文章

订阅专栏

Vue

55 篇文章

订阅专栏

本文介绍了如何在Vue项目中，使用v-model时将输入框内的小写字母自动转换为大写。由于直接结合filter会引发错误，所以建议通过计算属性的方式来实现这一功能。

输入框中小写字母自动转换为大写

网站地址：我的个人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>

https://www.cnblogs.com/yuxiaole/p/9289205.html