Vue で複数選択とラジオ ボタンを実装する方法

Vue は、開発者がインタラクティブな Web アプリケーションを迅速に作成するのに役立つ、非常に人気のある JavaScript フレームワークです。この記事では、Vue が複数選択とラジオ ボタンを実装する方法を紹介します。

複数選択ボタン

複数選択ボタンは通常、ユーザーが複数のオプションを選択できるようにするために使用されます。 Vue では、v-model ディレクティブとチェックボックス要素を通じて複数選択ボタンを実装できます。

まず、Vue インスタンスで配列を定義する必要があります。この配列には、選択されたすべてのオプションが保存されます。各オプションをオブジェクトとして表し、 v-for ディレクティブを使用してページにレンダリングできます。

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="checkbox" :value="option" v-model="selectedOptions">
      {{ option.label }}
    </label>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

上記のコードでは、 v-for ディレクティブを使用してオプションのリストをページにレンダリングします。そして、各オプションの値を input 要素の value 属性にバインドします。また、v-model ディレクティブを使用して、選択したオプションを selectedOptions 配列にバインドします。

ユーザーが 1 つ以上のオプションを選択すると、selectedOptions 配列が更新され、ページに表示されます。コードの他の部分でこれらのオプションにアクセスし、それらを使用して他の操作を実行できます。

ラジオ ボタン

ラジオ ボタンは通常、ユーザーがオプションのセットからオプションを選択できるようにするために使用されます。 Vue では、v-model ディレクティブと radio 要素を通じてラジオ ボタンを実装できます。

複数選択ボタンとは異なり、ラジオ ボタンでは 1 つのオプションのみを選択できます。各オプションをオブジェクトとして表し、 v-for ディレクティブを使用してページにレンダリングできます。

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="radio" :value="option" v-model="selectedOption">
      {{ option.label }}
    </label>
    <p>Selected option: {{ selectedOption.label }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      selectedOption: null
    };
  }
};
</script>

上記のコードでは、 v-for ディレクティブを使用してオプションのリストをページにレンダリングします。そして、各オプションの値を input 要素の value 属性にバインドします。また、v-model ディレクティブを使用して、選択されたオプションを selectedOption 変数にバインドします。

ユーザーがオプションを選択すると、selectedOption 変数が更新され、ページに表示されます。コードの他の部分でこのオプションにアクセスし、それを使用して他の操作を実行できます。

全体として、Vue では複数選択ボタンとラジオ ボタンを非常に簡単に実装できます。 v-model ディレクティブと関連する HTML 要素を使用するだけで、インタラクティブな Web アプリケーションを作成し、ユーザーが必要なオプションを選択できるようにすることができます。

以上がVue で複数選択とラジオ ボタンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。