强制输入表单在vue.js中输入大写后端

我试着输入'a001'，显示屏会显示'A001'，因为CSS规则。在传递到后端之前将其转换为大写字符的正确/最佳方式是什么？强制输入表单在vue.js中输入大写后端

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    myid: '' 
 
    }, 
 
    methods: { 
 
    click: function() { 
 
     console.log('clicked id=', this.myid) 
 
    } 
 
    } 
 
});

div input { 
 
    text-transform: uppercase 
 
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="text" v-model="myid" placeholder="My ID" /> 
 
    <button type="button" @click="click">Submit</button> 
 
</div>

来源

2017-12-18 Daniel YC Lin

如何使用.toUpperCase（）？ – 2017-12-18 07:52:18

我想知道是否有CSS规则来简化额外的代码，如果需要多个字段进行转换 –

CSS has style =“text-transform：uppercase”但它只是可视化的，如果您尝试发送数据，它会通过你已经键入，而不是你如何看待它，即大写字母。 JavaScript是唯一的方法。 – 2017-12-18 08:10:32

HTML：

<div id="app"> 
    <input type="text" v-model="message" /> 
    <h4>{{ message | uppercase }}</h4> 
</div>

控制器：

Vue.filter('uppercase', function (value) { 
    return value.toUpperCase() 
}) 

new Vue({ 
    el: '#app', 
    data: { 
    message: 'foo' 
    } 
})

我希望这能解决你的问题。

来源

2017-12-18 07:54:58 javatar

您可以使用JavaScript函数调用toUpperCase()这样的：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    myid: '' 
 
    }, 
 
    methods: { 
 
    click: function() { 
 
    var str = this.myid.toUpperCase(); 
 
     console.log('clicked id=', str) 
 
    } 
 
    } 
 
});

div input { 
 
    text-transform: uppercase 
 
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="text" v-model="myid" placeholder="My ID" /> 
 
    <button type="button" @click="click">Submit</button> 
 
</div>

现在你可以删除CSS规则，如果你只是想传递的价值资本化，而不显示它或要么你可以收下。希望帮助:)

来源

2017-12-18 07:55:26

强制输入表单在vue.js中输入大写后端

回答

相关问题