如何在vue.js中创建始终大写的输入？

Question

我正在使用vue.js创建一个表单,我需要在vue中创建总是大写的输入.我知道我可以使用css属性

text-transform: uppercase;

然后在发送之前转换数据

data.someData.toUpperCase()

但我想知道在vue.js中是否有更聪明的方法.在反应中,我们可以创建受控输入并轻松完成.在Vue.js中有类似的东西吗？

我设法使用计算字段,但是,我必须为表单中的每个输入创建计算的getter和setter.有没有更好的方法呢？

Answer 1

您可以创建自定义指令。

Vue.directive( 'touppercase', {
    update (el) {
        el.value = el.value.toUpperCase()
    },
})

然后在需要的地方使用它。例如：

<input type="text" v-model="modelfield" v-touppercase>