Cara menetapkan nilai pada menu lungsur turun uniapp

Tetapkan nilai pada menu lungsur melalui pengikatan model. Langkah-langkahnya adalah seperti berikut: 1. Model bind; 2. Sediakan data pilihan;

Memberikan nilai kepada menu lungsur UniApp

Bagaimana untuk menetapkan nilai kepada menu lungsur UniApp?

Dalam UniApp, anda boleh menetapkan nilai pada menu lungsur melalui pengikatan model. model 绑定来给下拉菜单赋值。

具体步骤如下：

1. 绑定 model

在下拉菜单组件的 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

Langkah khusus adalah seperti berikut:

1 Ikat model

Dalam data komponen menu lungsur, ikat pembolehubah data. sebagai model:

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

🎜2 Penyediaan data pilihan🎜🎜🎜Letakkan data pilihan menu lungsur ke dalam tatasusunan, contohnya: 🎜

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

🎜🎜3 🎜🎜Dalam templat, gunakan menu lungsur turun Komponen dan ikat model dan pilihan: 🎜

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;
    }
  }
}

🎜🎜4 Pantau perubahan nilai🎜🎜🎜 perubahan peristiwa komponen boleh memantau perubahan nilai , dengan itu mengemas kini pembolehubah dipilih: 🎜rrreee🎜🎜5 Nilai permulaan 🎜🎜🎜Jika perlu, nilai awal boleh ditetapkan apabila komponen. dimulakan: 🎜rrreee🎜🎜Kod sampel: 🎜🎜rrreee

Atas ialah kandungan terperinci Cara menetapkan nilai pada menu lungsur turun uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!