uniappのラジオに値を割り当てる方法

UniApp で Radio に値を割り当てる方法

UniApp はクロスプラットフォーム開発フレームワークであり、開発者は UniApp を使用して、H5、アプレット、APP などのマルチターミナル アプリケーションを開発できます。 UniApp では、Radio は複数選択によく使用されるフォーム コントロールですが、Radio を使用する場合は、Radio に値を割り当てる必要がある場合があります。

Radio の基本的な使用法

UniApp で Radio コントロールを使用するのは非常に簡単です。まず、ページに Radio を導入し、Radio オプションを定義します。

<template>
  <view>
    <radio-group v-model="selected">
      <radio v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</radio>
    </radio-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    }
  }
}
</script>

上記のコードでは、<radio-group></radio-group> タグを通じて Radio グループを定義し、v を渡します。 - model 選択した項目の値をバインドします。次に、<radio></radio> タグを使用してラジオのオプションを定義し、v-for でオプション リストをループし、:value 属性を使用して割り当てます。オプションに値を入力します。

このように、ユーザーが項目の 1 つを選択すると、オプションの値が selected に保存されます。

Radio の割り当て

Radio に値を割り当てる必要がある場合、コンポーネントのロード時にコードを通じて selected の値を動的に変更できます。デフォルトの無線オプションが選択されています。デフォルトで選択されているオプションを「オプション 2」に設定する必要があるとします。次に、コンポーネントのロード時に selected の値を「2」に割り当てる必要があります。

<template>
  <view>
    <radio-group v-model="selected">
      <radio v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</radio>
    </radio-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    }
  },
  created() {
    this.selected = '2';
  }
}
</script>

上記のコードでは、created に ## を設定します。ライフサイクル関数 #selected の値を「2」に割り当てると、デフォルトの選択項目が「オプション 2」に設定されます。

v-model にバインドされた値が変更されると、Radio はそれに応じてオプションも更新することに注意してください。したがって、selected の値を変更するときは、新しい値がオプション リストに存在することを確認してください。そうでない場合、Radio ではオプションが選択されません。

概要

上記の簡単な例を通して、UniApp で Radio コントロールを使用するのが非常に簡単であることがわかり、簡単なコード変更で Radio の割り当てを実装することもできます。上記の内容が、UniApp のラジコンをより良く使用するのに役立つことを願っています。

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