Vue で数値入力ボックスとテキスト入力ボックスの違いを認識する方法

Vue では、ユーザーがデータを入力するために入力ボックスを使用する必要があることがよくありますが、入力ボックスが異なれば制限や検証ルールも異なります。たとえば、数値入力ボックスは数字のみに制限する必要がありますが、テキスト入力ボックスは制限する必要があります。制限する必要はありません 入力タイプ。この記事では、Vue で数値入力ボックスとテキスト入力ボックスの違いを実現する方法を紹介します。

1. type 属性を使用して入力ボックスのタイプを区別する

Vue では、type 属性を使用して入力ボックスをさまざまなタイプに区別できます。たとえば、type="text"はテキスト入力ボックスを意味し、type ="number" は数値入力ボックスを示します。 type 属性を使用する場合、パスワード ボックスには type="password"、電子メール入力ボックスには type="email"、電話入力ボックスには type="tel" など、他の値を設定することもできます。

<template>
  <div>
    <label>文本输入框：</label>
    <input type="text" v-model="textValue"></input>
    <br>
    <label>数字输入框：</label>
    <input type="number" v-model.number="numberValue"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textValue: '',
      numberValue: 0
    }
  }
}
</script>

上記のコードでは、2 つの入力ボックスを作成しました。1 つはテキスト入力ボックス、もう 1 つは数値入力ボックスです。 type 属性を異なるように設定することで、2 つのタイプの入力ボックスを簡単に区別できます。

2. v-model.number を使用して数値以外の文字をフィルタリングする

type 属性を使用して入力ボックスの入力タイプを制限できますが、ユーザーは数値以外の文字を入力することもできます。文字。数値入力ボックスに数値のみを入力できるようにするには、v-model.number ディレクティブを使用して数値以外の文字をフィルターする必要があります。

<template>
  <div>
    <label>数字输入框：</label>
    <input type="number" v-model.number="numberValue"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberValue: 0
    }
  }
}
</script>

上記のコードでは、.number 修飾子を v-model ディレクティブに追加するだけで、数値以外の文字をフィルタリングする機能を実装できます。このようにして、ユーザーが数字以外の文字を入力しようとしても、Vue は自動的にそれらをフィルターして除外し、入力ボックスには数字のみが含まれるようにします。

3. min 属性と max 属性を使用して数値入力範囲を制限する

数値入力ボックスでは、入力タイプの制限と数値以外の文字のフィルタリングに加えて、入力できる数値も制限できます。 min 属性と max 属性を設定することで入力できます。

<template>
  <div>
    <label>数字输入框（0-100）：</label>
    <input type="number" v-model.number="numberValue" min="0" max="100"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberValue: 0
    }
  }
}
</script>

上記のコードでは、min 属性と max 属性を設定することで、数値入力範囲を 0 ～ 100 に制限しています。ユーザーが入力した数値が 0 未満または 100 を超える場合、入力ボックスは自動的に赤色になり、送信できません。

概要

type 属性、v-model.number ディレクティブ、min 属性と max 属性を使用すると、数値入力ボックスとテキスト入力ボックスの違いを簡単に認識できます。実際の開発では、これらのナレッジ ポイントを柔軟に使用して、ユーザーにより良い入力エクスペリエンスを提供するだけで済みます。

以上がVue で数値入力ボックスとテキスト入力ボックスの違いを認識する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。