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

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