简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > Vue.js > 本文

v-model.trim を使用して Vue の入力ボックス データからスペースを削除する方法

王林
リリース： 2023-06-11 21:49:39
オリジナル
4423 人が閲覧しました

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 ディレクティブは、 や