Bagaimana untuk melaksanakan pemilih lungsur turun dalam vue untuk melintasi tatasusunan yang berbeza

Dengan pembangunan aplikasi web, semakin ramai orang memilih untuk menggunakan Vue.js untuk membina aplikasi mereka, dan arahan v-untuk terbina dalam Vue.js menjadikannya sangat mudah untuk melintasi data. Dalam artikel ini, kita akan melihat cara menggunakan arahan v-for Vue.js untuk mengulangi tatasusunan yang berbeza untuk melaksanakan pemilih lungsur turun.

Pertama, kita perlu mencipta tika Vue dan menentukan data. Dalam contoh ini, kami mentakrifkan dua tatasusunan, satu mengandungi buah-buahan dan satu mengandungi sayur-sayuran:

var app = new Vue({
  el: '#app',
  data: {
    fruits: [
      '苹果',
      '香蕉',
      '芒果'
    ],
    vegetables: [
      '胡萝卜',
      '青菜',
      '土豆'
    ],
    selectedFruit: '',
    selectedVegetable: ''
  }
})

Di sini selectedFruit dan selectedVegetable ialah pembolehubah yang digunakan untuk merekodkan buah-buahan dan sayur-sayuran yang dipilih oleh pengguna . Dalam HTML, kita boleh mengikat pembolehubah ini menggunakan arahan v-model:

<div id="app">
  <select v-model="selectedFruit">
    <option disabled value="">请选择水果</option>
    <option v-for="fruit in fruits" :value="fruit">
      {{ fruit }}
    </option>
  </select>

  <select v-model="selectedVegetable">
    <option disabled value="">请选择蔬菜</option>
    <option v-for="vegetable in vegetables" :value="vegetable">
      {{ vegetable }}
    </option>
  </select>
</div>

Dalam kod di atas, kami menggunakan arahan v-for untuk lelaran ke atas susunan buah-buahan dan sayur-sayuran. Ambil perhatian bahawa kami menggunakan sintaks :value untuk menetapkan nilai setiap pilihan dan bukannya menggunakan atribut value. Ini kerana kita perlu menetapkan nilai pilihan secara dinamik dan bukannya mengekodkannya ke dalam templat.

Kini apabila pengguna memilih buah atau sayur, kami boleh mengemas kini pembolehubah yang sepadan dalam contoh Vue. Contohnya, apabila memilih buah, kita boleh menyimpan buah yang dipilih pengguna dalam selectedFruit menggunakan kod berikut:

var app = new Vue({
  // ...
  methods: {
    selectFruit: function(event) {
      this.selectedFruit = event.target.value
    }
  }
})

Ikat kaedah selectFruit pada acara change:

<select v-model="selectedFruit" @change="selectFruit">

Begitu juga, kita boleh mencipta kaedah selectVegetable untuk mengendalikan pemilihan sayur-sayuran pengguna:

var app = new Vue({
  // ...
  methods: {
    selectVegetable: function(event) {
      this.selectedVegetable = event.target.value
    }
  }
})

<select v-model="selectedVegetable" @change="selectVegetable">

Kini, apabila pengguna memilih buah atau sayur, kita boleh mencetak keluar pilihan Pengguna. Sebagai contoh, kita boleh mencipta kaedah logSelection dalam contoh Vue untuk merekodkan pemilihan:

var app = new Vue({
  // ...
  methods: {
    logSelection: function() {
      console.log("水果选择: " + this.selectedFruit)
      console.log("蔬菜选择: " + this.selectedVegetable)
    }
  }
})

Kita juga perlu mengikat kaedah logSelection pada butang supaya selepas pengguna membuat pilihan , Klik butang ini untuk mencetak maklumat pemilihan:

<button @click="logSelection">打印选择</button>

Kini, apabila pengguna memilih buah atau sayur, kita boleh melihat maklumat yang dicetak pada konsol.

Ringkasan

Arahan v-for Vue.js boleh membantu kami melintasi tatasusunan dengan mudah, dan arahan model-v boleh digunakan untuk mengikat nilai yang dipilih pengguna kepada pembolehubah dalam contoh Vue. Pembolehubah ini boleh digunakan pada bila-bila masa untuk melaksanakan sebarang fungsi yang kami perlukan. Dalam contoh di atas, kami menggunakan dua tatasusunan berbeza untuk membuat pemilih lungsur turun dan merekodkan pemilihan pengguna dalam masa nyata.

Saya harap artikel ini dapat membantu anda menggunakan v-for untuk melintasi tatasusunan dan melaksanakan pemilih lungsur dalam Vue.js.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemilih lungsur turun dalam vue untuk melintasi tatasusunan yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!