Cara menetapkan nilai pada menu lungsur turun uniapp-uni-app-php.cn

Cara menetapkan nilai pada menu lungsur turun uniapp

下次还敢

Lepaskan： 2024-04-06 03:30:22

asal

1223 orang telah melayarinya

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

Cara menetapkan nilai pada menu lungsur turun uniapp

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：

<code class="javascript">data() {
  return {
    selected: '', // 用来保存选中的值
  }
}</code>

Salin selepas log masuk

2. 选项数据准备

将下拉菜单选项数据放在一个数组中，例如：

<code class="javascript">data() {
  return {
    options: [
      { value: '1', label: '选项 1' },
      { value: '2', label: '选项 2' },
      { value: '3', label: '选项 3' },
    ]
  }
}</code>

Salin selepas log masuk

3. 渲染下拉菜单

在模板中，使用下拉菜单组件，并绑定 model 和 options：

<code class="html"><picker
  v-model="selected"
  :options="options"
/></code>

Salin selepas log masuk

4. 监听值变化

组件的 change 事件可以监听值变化，从而更新 selected

Langkah khusus adalah seperti berikut:

1 Ikat model

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

<code class="javascript">methods: {
  handlePickerChange(value) {
    this.selected = value;
  }
}</code>

Salin selepas log masuk

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

<code class="javascript">created() {
  this.selected = '1'; // 设置初始值为选项 1
}</code>

Salin selepas log masuk

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

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

Salin selepas log masuk

🎜🎜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!