強制輸入表單在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中輸入大寫後端

回答

相關問題