uniappにラジオボタンを実装する方法

uniapp では、ラジオ ボタンは一般的な対話型コントロールであり、登録ページでの性別の選択、設定ページでの言語の選択など、ユーザーが 1 つ以上のオプションを選択するシナリオで使用されます。この記事では、基本的なHTML構文やVue.jsの構文を含め、uniappでラジオボタンを実装する方法を詳しく紹介します。

1. 基本的な HTML 構文

ネイティブ HTML では、ラジオ ボタンは <input> タグとその type によって実装されます。 ラジオ ボタンを実装するために、属性は radio に設定されます。同時に、ラジオ ボタン ボックスごとに value 属性を設定して、ラジオ ボタン ボックスで表されるオプションを決定する必要があります。たとえば、

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

、ここで name 属性は同じ値に設定され、2 つのラジオ ボタン ボックスが同じグループにあり、そのうち 1 つだけを選択できることを示します。value 属性は male に設定されます。それぞれ と 女性 は、各オプションがラジオ ボタン ボックスで表されることを示します。

2. Vue.js 構文

uniapp では、Vue.js 構文を使用してラジオ ボタンを簡単に実装できます。 v-model ディレクティブを通じてオプションの値をデータ モデルにバインドします。ユーザーがラジオ ボタンを選択すると、それに応じてモデルの値が変更されます。例:

<template>
  <div>
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">男</label>
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">女</label>
    <p>您的选择是：{{gender}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: '',
    };
  },
};
</script>

その中で、v-model ディレクティブは、gender 属性をラジオ ボタン ボックスに関連付けます。ユーザーがラジオ ボタン ボックスを選択すると、 性別 属性の値は自動的に更新されます。最後に、ユーザーが選択した値がテンプレートに表示されます。

v-model ディレクティブは、<input>、<select> などのフォーム要素でのみ使用できることに注意してください。 と <textarea> など。

3. ラジオ ボタン コンポーネントのカプセル化

再利用とメンテナンスを容易にするために、ラジオ ボタンをコンポーネントにカプセル化できます。 components ディレクトリに、新しい Radio.vue コンポーネントを作成します:

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

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true,
    },
    value: {
      type: String,
      required: true,
    },
  },
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
};
</script>

このコンポーネントは 2 つのプロパティを受け取ります:

• options : 各オプションの value および label を含むオプション配列を表します;
• value: 現在選択されている値を表します、つまり、データ モデルの属性値に対応します。

v-for 命令を使用してオプション配列を走査し、複数のラジオ ボタン ボックスを生成します。 v-model 命令と get および set メソッドを通じて、選択された値がデータ モデルにバインドされ、選択されると input# がトリガーされます。 .##Event、親コンポーネントの value 属性を更新します。

このコンポーネントを使用する場合、オプション配列とバインドされたデータ モデルを渡すだけで済みます。

<template>
  <div>
    <Radio :options="options" v-model="selected"></Radio>
  </div>
</template>

<script>
import Radio from '@/components/Radio.vue';

export default {
  components: {
    Radio,
  },
  data() {
    return {
      options: [
        {
          value: 'male',
          label: '男',
        },
        {
          value: 'female',
          label: '女',
        },
      ],
      selected: '',
    };
  },
};
</script>

コンポーネントを導入し、オプション配列と

v-model を渡すことにより、 ディレクティブでは、カプセル化されたラジオ ボタン コンポーネントを使用できます。

概要

この記事では、基本的な HTML 構文と Vue.js 構文を含む、uniapp でラジオ ボタンを実装する方法を詳しく紹介し、再利用しやすいようにラジオ ボタン コンポーネントをカプセル化する方法を示します。そしてメンテナンス。これらのスキルをマスターすると、実際のプロジェクトでラジオ ボタンを使用することに慣れてくると思います。

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