Bagaimana untuk melaksanakan pilihan berbilang dan butang radio dalam Vue

Vue ialah rangka kerja JavaScript yang sangat popular yang membantu pembangun membuat aplikasi web interaktif dengan cepat. Artikel ini akan memperkenalkan cara Vue melaksanakan berbilang pilihan dan butang radio.

Butang Berbilang Pilihan

Butang Berbilang Pilihan biasanya digunakan untuk membolehkan pengguna memilih berbilang pilihan. Dalam Vue, kami boleh melaksanakan butang berbilang pilih melalui arahan model v dan elemen kotak semak.

Pertama, kita perlu menentukan tatasusunan dalam contoh Vue ini akan menyimpan semua pilihan yang dipilih. Kami boleh mewakili setiap pilihan sebagai objek dan menjadikannya pada halaman menggunakan arahan v-for:

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="checkbox" :value="option" v-model="selectedOptions">
      {{ option.label }}
    </label>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

Dalam kod di atas, kami menggunakan arahan v-for untuk memaparkan senarai pilihan ke halaman , dan ikat nilai setiap pilihan pada atribut nilai elemen input. Kami juga menggunakan arahan v-model untuk mengikat pilihan yang dipilih ke dalam tatasusunan SelectOptions.

Apabila pengguna memilih satu atau lebih pilihan, tatasusunan Pilihan yang dipilih dikemas kini dan dipaparkan pada halaman. Kami boleh mengakses pilihan ini di bahagian lain kod dan menggunakannya untuk melaksanakan operasi lain.

Butang Radio

Butang radio biasanya digunakan untuk membolehkan pengguna memilih pilihan daripada satu set pilihan. Dalam Vue, kami boleh melaksanakan butang radio melalui arahan model-v dan elemen radio.

Tidak seperti butang berbilang pilih, butang radio hanya boleh memilih satu pilihan. Kami boleh mewakili setiap pilihan sebagai objek dan menjadikannya pada halaman menggunakan arahan v-for:

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="radio" :value="option" v-model="selectedOption">
      {{ option.label }}
    </label>
    <p>Selected option: {{ selectedOption.label }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      selectedOption: null
    };
  }
};
</script>

Dalam kod di atas, kami menggunakan arahan v-for untuk memaparkan senarai pilihan ke halaman , dan ikat nilai setiap pilihan pada atribut nilai elemen input. Kami juga menggunakan arahan model-v untuk mengikat pilihan yang dipilih kepada pembolehubah SelectOption.

Apabila pengguna memilih pilihan, pembolehubah Pilihan yang dipilih akan dikemas kini dan dipaparkan pada halaman. Kami boleh mengakses pilihan ini di bahagian lain kod dan menggunakannya untuk melaksanakan operasi lain.

Secara keseluruhan, Vue menjadikan pelaksanaan berbilang pilihan dan butang radio sangat mudah. Dengan hanya menggunakan arahan model v dan elemen HTML yang berkaitan, kami boleh mencipta aplikasi web interaktif dan membolehkan pengguna memilih pilihan yang mereka perlukan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pilihan berbilang dan butang radio dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!