モデル バインディングを通じてドロップダウン メニューに値を割り当てます。手順は次のとおりです: 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 サイトの他の関連記事を参照してください。