2017-12-18 139 views
1

我試着輸入'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>

+0

如何使用.toUpperCase()? – 2017-12-18 07:52:18

+0

我想知道是否有CSS規則來簡化額外的代碼,如果需要多個字段進行轉換 –

+0

CSS has style =「text-transform:uppercase」但它只是可視化的,如果您嘗試發送數據,它會通過你已經鍵入,而不是你如何看待它,即大寫字母。 JavaScript是唯一的方法。 – 2017-12-18 08:10:32

回答

0

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' 
    } 
}) 

我希望這能解決你的問題。

0

您可以使用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規則,如果你只是想傳遞的價值資本化,而不顯示它或要麼你可以收下。 希望幫助:)