uniapp ドロップダウン メニューに値を割り当てる方法

モデル バインディングを通じてドロップダウン メニューに値を割り当てます。手順は次のとおりです: 1. モデルのバインド; 2. オプション データの準備; 3. レンダリング ドロップダウン メニュー; 4. 値の変更の監視; 5. 値の初期化。

UniApp ドロップダウン メニューの割り当て

UniApp ドロップダウン メニューに値を割り当てるにはどうすればよいですか?

UniApp では、modelバインディングを通じてドロップダウン メニューに値を割り当てることができます。

具体的な手順は次のとおりです:

1. ドロップでmodel

をバインドします。 -down メニュー コンポーネントdata、データ変数をmodelとしてバインドします:

data() { return { selected: '', // 用来保存选中的值 } }

2. オプションのデータ準備

オプション データは配列に配置されます (例:

data() { return { options: [ { value: '1', label: '选项 1' }, { value: '2', label: '选项 2' }, { value: '3', label: '选项 3' }, ] } }

3)。ドロップダウン メニューをレンダリングします

テンプレートでは、ドロップダウン メニュー コンポーネントを作成し、modelとoptionsをバインドします:

4. 値の変更をリッスンします

コンポーネントのchangeイベントは値の変更をリッスンすることができ、それによってselected変数:

methods: { handlePickerChange(value) { this.selected = value; } }

5 を更新します。初期化値

必要に応じて、コンポーネントの初期化中に初期値を設定できます:

created() { this.selected = '1'; // 设置初始值为选项 1 }

サンプル コード:

import { Picker } from '@dcloudio/uni-ui' export default { components: { Picker }, data() { return { selected: '', options: [ { value: '1', label: '选项 1' }, { value: '2', label: '选项 2' }, { value: '3', label: '选项 3' }, ] } }, created() { this.selected = '1'; }, methods: { handlePickerChange(value) { this.selected = value; } } }

以上がuniapp ドロップダウン メニューに値を割り当てる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。