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 をバインドします:

<picker
  v-model="selected"
  :options="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 サイトの他の関連記事を参照してください。