Vue を使用してラベル付き入力ボックスを実装するにはどうすればよいですか?

Web アプリケーションの開発に伴い、ラベル付き入力ボックスの人気が高まっています。この種の入力ボックスを使用すると、ユーザーはデータをより便利に入力できるようになり、入力されたデータの管理や検索も容易になります。 Vue は、ラベル付き入力ボックスを迅速に実装するのに役立つ非常に強力な JavaScript フレームワークです。この記事では、Vue を使用してラベル付き入力ボックスを実装する方法を紹介します。

ステップ 1: Vue インスタンスを作成する

まず、ページ上に Vue インスタンスを作成する必要があります。コードは次のとおりです:

<template>
  <div>
    <div>
      <label>标签：</label>
      <input type="text" v-model="newTag" v-on:keyup.enter="addTag">
    </div>
    <div>
      <label>标签列表：</label>
      <div v-for="(tag, index) in tags" :key="index">
        {{ tag }}
        <button v-on:click="removeTag(index)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ["标签1", "标签2", "标签3"],
      newTag: ""
    };
  },
  methods: {
    addTag() {
      if (this.newTag.trim() !== "") {
        this.tags.push(this.newTag.trim());
        this.newTag = "";
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
};
</script>

コード内では、入力ボックスとタグのリストを備えた Vue コンポーネントを含む Vue インスタンスを作成します。入力ボックスは新しいタグを追加するために使用され、タグリストは既存のタグを表示するために使用され、タグを削除する機能を提供します。

コンポーネントの data メソッドでは、2 つのデータ項目を定義します: tags は、すべてのタグのデータを保存するために使用されます。初期値は 3 つを含む 1 つです。配列 newTag は、ユーザーが入力した新しいタグのデータを格納するために使用され、初期値は空の文字列です。

methods では、2 つのメソッドを定義します: addTag は新しいタグを追加するために使用され、ユーザーが Enter キーを押した後に新しいタグが追加されます。 tags 配列、newTag を空の文字列に設定します。removeTag はタグの削除に使用され、受信タグに基づいて から削除されます。 Index tags 配列から対応するタグを削除します。

ステップ 2: タグ リストを表示する

次に、タグ リストを表示する必要があります。この機能を実現するには、Vue で v-for ディレクティブを使用します。 v-for ディレクティブは、配列内のデータをループしてページに表示できます。

コードでは、v-for="(tag,index)in tags" を使用して、tags 配列内のすべてのタグをループします。 tag は配列内の各タグを表し、index は配列内のタグのインデックスを表します。 :key="index" 属性を使用してタグのインデックスを一意に識別します。これは、Vue がコンポーネントのパフォーマンスを最適化するのに役立ちます。

ステップ 3: 新しいタグを追加する

ユーザーが入力ボックスに新しいタグを入力して Enter キーを押したら、新しいタグを tags## に追加する必要があります。 # 配列内の。この機能を実現するには、Vue で v-model ディレクティブを使用します。 v-model ディレクティブは、コンポーネント内のデータをページ上のフォーム要素に双方向にバインドできます。

コードでは、

v-model="newTag" を使用して、入力ボックスの値をコンポーネントの newTag データに双方向にバインドします。このように、ユーザーが入力ボックスに新しいタグを入力すると、newTag の値もそれに応じて変更されます。

Vue の

v-on ディレクティブも使用して、ユーザー キー イベントをリッスンしました。ユーザーが Enter キーを押すと、v-on:keyup.enter によって addTag メソッドがトリガーされ、新しいタグが tags 配列に追加されます。

ステップ 4: タグを削除する

最後に、ユーザーがタグを削除できるようにする必要があります。この機能を実現するには、ボタンを使用し、ユーザーがボタンをクリックすると、対応するタグを

tags 配列から削除します。

コードでは、Vue の

v-on ディレクティブを使用してユーザーのクリック イベントをリッスンします。ユーザーが削除ボタンをクリックすると、v-on:click は removeTag メソッドをトリガーし、受信したタグ インデックスをパラメータとして受け取り、対応するタグを tags から削除します。 配列のタグ。

概要

上記のデモを通じて、Vue を使用してラベル付き入力ボックスを実装する方法を学びました。 Vue の

v-for、v-model、v-on ディレクティブを使用して、ラベル リストと双方向バインディング入力の値を表示しました。入力ボックスとボタンのキーボードとマウスのイベントをリッスンするだけでなく。実際のプロジェクトでは、必要に応じてラベルのスタイルや操作方法をカスタマイズすることで、より柔軟なラベル付き入力ボックスを実現できます。

以上がVue を使用してラベル付き入力ボックスを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。