モデル バインディングを通じてドロップダウン メニューに値を割り当てます。手順は次のとおりです: 1. モデルのバインド; 2. オプション データの準備; 3. レンダリング ドロップダウン メニュー; 4. 値の変更の監視; 5. 値の初期化。
UniApp ドロップダウン メニューの割り当て
UniApp ドロップダウン メニューに値を割り当てるにはどうすればよいですか?
UniApp では、model
バインディングを通じてドロップダウン メニューに値を割り当てることができます。
具体的な手順は次のとおりです:
1. ドロップで model
をバインドします。 -down メニュー コンポーネント data
、データ変数を model
としてバインドします:
<code class="javascript">data() { return { selected: '', // 用来保存选中的值 } }</code>
2. オプションのデータ準備
オプション データは配列に配置されます (例:
<code class="javascript">data() { return { options: [ { value: '1', label: '选项 1' }, { value: '2', label: '选项 2' }, { value: '3', label: '选项 3' }, ] } }</code>
3)。ドロップダウン メニューをレンダリングします
テンプレートでは、ドロップダウン メニュー コンポーネントを作成し、model
と options
をバインドします:
<code class="html"><picker v-model="selected" :options="options" /></code>
4. 値の変更をリッスンします
コンポーネントの change
イベントは値の変更をリッスンすることができ、それによって selected
変数:
<code class="javascript">methods: { handlePickerChange(value) { this.selected = value; } }</code>
5 を更新します。初期化値
必要に応じて、コンポーネントの初期化中に初期値を設定できます:
<code class="javascript">created() { this.selected = '1'; // 设置初始值为选项 1 }</code>
サンプル コード:
<code class="javascript">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; } } }</code>
以上がuniapp ドロップダウン メニューに値を割り当てる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。