v-model.trim を使用して Vue の入力ボックス データからスペースを削除する方法
vue
v-model
trim
Vue は、応答性の高い Web ページを構築するための人気のある JavaScript フレームワークです。 v-model は Vue で最も一般的に使用されるディレクティブの 1 つで、データとフォーム コントロールの双方向バインディングに使用されます。 v-model.trim は v-model の特別な使用法であり、入力ボックス内のデータの先頭と末尾のスペースを削除するために使用されます。
Vue では、v-model.trim ディレクティブを使用して、フォーム コントロールのスペース削除機能を実装できます。たとえば、次のように v-model.trim ディレクティブをテキスト ボックスにバインドできます。
<template>
<div>
<label for="username">用户名：</label>
<input type="text" id="username" v-model.trim="username">
<p>去空格后的用户名：{{ trimmedUsername }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
}
},
computed: {
trimmedUsername() {
return this.username.trim()
},
},
}
</script>ログイン後にコピー
上記のコードでは、テキスト ボックスの値を「username」属性という名前のデータにバインドします。 v-model.trim ディレクティブを使用してスペース削除機能を実装します。さらに、スペースを削除した後のユーザー名を表示するために、計算属性「trimmedUsername」も定義します。
v-model.trim ディレクティブは、 や