Vueでキーボードイベントによる入力ボックスのスペースの除去
1153 ワード
[Talk is cheap. Show me the code]
理論知識を見たくない場合は、最後のコード例を直接移動してください.
一、プロジェクトシーン
プロジェクトビジネスは、VueおよびElementUIのバックグラウンド管理システムに基づいており、フォームの正規検証に関連しています.フォーム検証には、入力ボックスのスペースを削除し、アルファベットを大文字に変換する必要があります.
二、出会った問題
最初の解決策:Vue自体はスペースを除去する修飾子
フォームイベントには
三、コード例
HTML:v-modelの値は、自分の必要な値を正常にバインドします.
JS:
本文に関する意見があれば、文章の下に伝言を残してください.私は見た最初の時間に返事します.
理論知識を見たくない場合は、最後のコード例を直接移動してください.
一、プロジェクトシーン
プロジェクトビジネスは、VueおよびElementUIのバックグラウンド管理システムに基づいており、フォームの正規検証に関連しています.フォーム検証には、入力ボックスのスペースを削除し、アルファベットを大文字に変換する必要があります.
二、出会った問題
最初の解決策:Vue自体はスペースを除去する修飾子
v-model.trim
を提供しているので、 v-model.trim
の修飾子でスペースを除去することができますが、v-model.trim
は入力ボックスの前後のスペースしか除去できず、中間のスペースは除去できません.したがって、フォームイベントをリスニングし、正規一致でスペースを除去します.フォームイベントには
@input
@keyup
などがあります.しかし、ElementUIはフォームを二次パッケージ化しており、コンポーネント内のオリジナルイベントをリスニングするには .native
修飾子を追加してオリジナルのkeyupイベントをリスニングする必要がある.三、コード例
HTML:v-modelの値は、自分の必要な値を正常にバインドします.
JS:
methods:{
/**
* @param {* state } state
*/
clearTrim(state) {
this.listQuery[state] = this.listQuery[state].replace(/\s/ig, '').toUpperCase().slice(0, 20)
},
}
本文に関する意見があれば、文章の下に伝言を残してください.私は見た最初の時間に返事します.