Cara menyediakan kotak pilihan lungsur turun dalam Vue.js

Vue.js ialah rangka kerja JavaScript ringan yang digunakan secara meluas dalam pembangunan web. Artikel ini terutamanya memperkenalkan cara menyediakan kotak pilihan lungsur turun dalam Vue.js.

1. Tentukan data dalam tika Vue

Dalam tika Vue, anda boleh menggunakan pilihan data untuk menentukan data, contohnya:

data() {
  return {
    selectedValue: ''
  }
}

Di sini, kami Sifat data yang dipanggil selectedValue ditakrifkan dan dimulakan kepada rentetan kosong.

2. Ikat nilai kotak pilihan lungsur turun pada atribut dalam contoh Vue

Dalam kotak pilihan lungsur, kita perlu menggunakan v- arahan model untuk mengikat nilai yang dipilih dengan Properties dalam contoh Vue. Contohnya:

<select v-model="selectedValue">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Di sini, kami mengikat nilai yang dipilih bagi kotak pilihan lungsur ke sifat selectedValue dalam tika Vue.

3. Dapatkan nilai yang dipilih dalam kotak pilihan lungsur turun

Kita boleh menggunakan pilihan kaedah untuk menentukan kaedah bernama getSelectedValue untuk mendapatkan nilai yang dipilih dalam drop- kotak pilihan bawah.

methods: {
  getSelectedValue() {
    console.log(this.selectedValue);
  }
}

Di sini, kami mentakrifkan kaedah untuk mencetak nilai atribut selectedValue dalam contoh Vue melalui console.log.

4. Kod sampel lengkap

Berikut ialah contoh lengkap kotak pilihan lungsur turun, termasuk mentakrifkan data, mengikat nilai kotak pilihan lungsur turun ke sifat dalam contoh Vue, dan mendapatkan nilai Terpilih:

<div id="app">
  <select v-model="selectedValue" @change="getSelectedValue">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      selectedValue: ''
    }
  },
  methods: {
    getSelectedValue() {
      console.log(this.selectedValue);
    }
  }
})
</script>

5. Ringkasan

Melalui contoh di atas, kita boleh mendapati bahawa menetapkan kotak pilihan lungsur turun dalam Vue adalah sangat mudah Anda hanya perlu mentakrifkan data dan mengikat Tetapkan nilai kotak pilihan lungsur turun dan atribut dalam contoh Vue, dan kemudian dapatkan nilai pilihan kotak pilihan lungsur turun seperti yang diperlukan.

Atas ialah kandungan terperinci Cara menyediakan kotak pilihan lungsur turun dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!