Vueで入力ボックスの隠し機能を実装する方法

Web アプリケーションの開発に伴い、ユーザーがデータを入力する必要があるビジネス シナリオが増えており、ユーザー入力ボックスはこの目標を達成するために必要なコンポーネントの 1 つです。もちろん、入力ボックスを完全に隠すのではなく、入力したパスワードなど入力ボックスの一部を隠す必要がある場合もあります。 Vue で入力ボックスを非表示にするのは非常に簡単です。この記事では、実装の詳細を理解するのに役立ちます。

まず、Vue とは何かを理解する必要があります。 Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。 Vue は他のライブラリや既存のプロジェクトと簡単に統合でき、ユーザーがさまざまな UI インタラクションを簡単に完了できる非常にシンプルな API も提供します。

次に、Vue のいくつかの重要な概念、つまり Vue インスタンス、コンポーネント、プロップ、イベント、計算されたプロパティを理解する必要があります。

• Vue インスタンス: Vue の核となる概念であり、新しい Vue で作成されるオブジェクトです。 Vue インスタンス内のすべてのプロパティとメソッドにはインスタンスを通じてアクセスでき、Vue のさまざまな動作も Vue インスタンスのライフサイクル メソッドを通じて制御できます。
• コンポーネント: Vue の独立したモジュールであり、コードをより小さく、整理しやすい部分に分割するのに役立ちます。したがって、コンポーネントは Vue の非常に重要な概念です。
• Props: Vue コンポーネントのプロパティ オブジェクトで、コンポーネントにデータを渡すために使用されます。 Props は一方向のデータ フローです。つまり、親コンポーネントは子コンポーネントにデータを渡すことができますが、子コンポーネントは props の値を直接変更できません。
• イベント: DOM イベントの監視と応答に使用できます。Vue には、さまざまなイベントを処理するための組み込みのイベント修飾子がいくつか用意されています。
• 計算されたプロパティ: 他の変数の値に基づいてプロパティを計算するために使用されます。計算されたプロパティは Vue の重要な概念であり、プロパティの計算やコンポーネント内の動的計算によく使用されます。

これらの概念を理解した後、入力ボックスを非表示にする機能の実装を開始できます。まず、新しい Vue インスタンスを作成し、textInput コンポーネントを追加する必要があります。このコンポーネントには、入力ボックスを非表示にするかどうかを制御するための prop が必要です。このコンポーネントのコードは次のとおりです:

// textInput.vue
<template>
  <div>
    <input 
      type="text" 
      :value="inputValue"
      @input="handleInput"
      v-if="!hidden"
    />
    <input 
      type="password" 
      :value="inputValue"
      @input="handleInput"
      v-if="hidden"
    />
  </div>
</template>

<script>
  export default {
    name: 'textInput',
    props: {
      hidden: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      handleInput(e) {
        this.inputValue = e.target.value
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

このコンポーネントでは、2 つの入力ボックスを定義します。1 つは通常のテキスト入力ボックス、もう 1 つはパスワード入力ボックスです。それらの唯一の違いは、そのタイプです。属性。両方の入力ボックスは、入力値を保存するために使用される inputValue 変数にバインドされています。同時に、これらは入力イベントにもバインドされており、ユーザーが入力ボックスに入力すると、inputValue 変数の値が更新され、入力イベントがトリガーされます。

コンポーネントでは、v-if ディレクティブを使用して、入力ボックスを非表示にするかどうかを制御します。 hidden が false の場合は通常のテキスト入力ボックスが表示され、hidden が true の場合はパスワード入力ボックスが表示されます。ここでは、隠し属性をコンポーネントに渡すために Props も使用されます。

次に、このコンポーネントを Vue インスタンスで使用し、カスタム入力変数を通じてその非表示を制御する必要があります。実装コードは次のとおりです。

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ hideInput ? 'Show' : 'Hide' }} input
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

この Vue インスタンスでは、上で記述したコンポーネントを導入し、input と hideInput の 2 つの変数を定義しました。このうち、input 変数は入力ボックスの値を保存するために使用され、hideInput 変数は入力ボックスの非表示を制御するために使用されます。

テンプレート内のコンポーネントをレンダリングし、入力ボックスを非表示にするかどうかを制御するパラメータとして HideInput 変数を渡します。また、入力ボックスでパスワードを使用するかどうかを切り替えるために、 HideInput 変数の値を切り替えるボタンも追加しました。

最後に、ボタンに表示されるテキストを制御するために、Vue インスタンスに計算プロパティを追加する必要があります。具体的なコードは次のとおりです。

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ buttonText }}
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    computed: {
      buttonText() {
        return this.hideInput ? 'Show' : 'Hide' + ' input'
      }
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

ここでは、計算属性 buttonText を追加して、ボタンに表示されるテキストを HideInput の値に基づいて決定します。このように、hideInput が false の場合、ボタンのテキストは「入力を非表示」になり、hideInput が true の場合、ボタンのテキストは「入力を表示」になります。

上記のコードを使用すると、Vue を介して入力ボックスを非表示にする機能を簡単に実装できます。要約すると、Vue で入力ボックスを非表示にするには、2 つの入力ボックスを含むコンポーネントを定義し、props を介してそれを非表示にするかどうかに関する情報を渡し、さらに、ボタンに表示されるテキストを制御する計算プロパティを追加する必要があります。隠し入力ボックス。

以上がVueで入力ボックスの隠し機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。