Cara menggunakan pemprosesan borang Vue untuk melaksanakan penapisan dan penapisan data borang

Cara menggunakan pemprosesan borang Vue untuk melaksanakan penapisan dan penapisan data borang

Dengan pembangunan aplikasi web, pengguna mempunyai permintaan yang lebih tinggi untuk penapisan dan penapisan data. Dalam Vue.js, kami boleh menggunakan pemprosesan borang untuk melaksanakan fungsi penapisan dan penapisan data, membolehkan pengguna menapis dan mencari data yang diperlukan mengikut keperluan mereka sendiri. Artikel ini akan memperkenalkan cara menggunakan pemprosesan borang Vue untuk melaksanakan fungsi penapisan dan penapisan data, serta melampirkan contoh kod yang sepadan.

Pertama, kita perlu menyediakan senarai yang mengandungi data. Katakan kita mempunyai senarai yang mengandungi maklumat pengguna Setiap pengguna mempunyai tiga atribut: nama, umur dan jantina. Kami boleh menentukan tatasusunan bernama pengguna, yang mengandungi maklumat tentang semua pengguna. Seperti yang ditunjukkan di bawah:

data() {
  return {
    users: [
      { name: '张三', age: 25, gender: '男' },
      { name: '李四', age: 30, gender: '女' },
      { name: '王五', age: 28, gender: '男' }
    ],
    filteredUsers: []
  }
}

Seterusnya, kita perlu mencipta borang dalam templat Vue untuk input pengguna bagi syarat penapis. Borang ini boleh mengandungi berbilang input untuk memasukkan kriteria penapisan yang berbeza. Dalam contoh ini, kami akan mencipta kotak input teks untuk menapis mengikut nama, kotak pilihan untuk menapis mengikut umur dan butang radio untuk menapis mengikut jantina. Seperti yang ditunjukkan di bawah:

<form @submit.prevent="filterUsers">
  <label for="name">姓名:</label>
  <input type="text" id="name" v-model="name">

  <label for="age">年龄:</label>
  <select id="age" v-model="age">
    <option value="">不限</option>
    <option value="20">20岁以下</option>
    <option value="30">30岁以下</option>
    <option value="40">40岁以下</option>
    <option value="40+">40岁以上</option>
  </select>

  <label for="gender">性别:</label>
  <input type="radio" id="gender" value="" v-model="gender">不限
  <input type="radio" id="gender" value="男" v-model="gender">男
  <input type="radio" id="gender" value="女" v-model="gender">女

  <button type="submit">筛选</button>
</form>

Dalam borang ini, kami menggunakan arahan model v untuk mengikat nilai input borang secara dwiarah kepada data tika Vue. Dengan cara ini, Vue akan mengemas kini nilai data secara automatik apabila pengguna memasuki keadaan penapis.

Seterusnya, kita perlu menentukan kaedah dalam contoh Vue untuk mengendalikan acara penyerahan borang, iaitu menapis dan menapis data. Dalam kaedah ini, kami akan menapis data berdasarkan keadaan penapis yang dimasukkan oleh pengguna dan menyimpan hasil penapis ke tatasusunan baru yang ditapisUsers. Seperti yang ditunjukkan di bawah:

methods: {
  filterUsers() {
    this.filteredUsers = this.users.filter(user => {
      let nameMatch = true;
      let ageMatch = true;
      let genderMatch = true;

      if (this.name) {
        nameMatch = user.name.includes(this.name);
      }

      if (this.age) {
        if (this.age === '20') {
          ageMatch = user.age < 20;
        } else if (this.age === '30') {
          ageMatch = user.age < 30;
        } else if (this.age === '40') {
          ageMatch = user.age < 40;
        } else if (this.age === '40+') {
          ageMatch = user.age >= 40;
        }
      }

      if (this.gender) {
        genderMatch = user.gender === this.gender;
      }

      return nameMatch && ageMatch && genderMatch;
    });
  }
}

Dalam kaedah ini, kami menggunakan kaedah penapis Array untuk menapis senarai pengguna berdasarkan keadaan penapis input. Bandingkan nilai atribut pengguna berdasarkan nama, umur dan jantina yang dimasukkan Jika syarat penapis dipadankan, pengguna ditambahkan pada tatasusunan Pengguna yang ditapis.

Akhir sekali, kami memaparkan hasil penapis dalam templat. Seperti yang ditunjukkan di bawah:

<div v-for="user in filteredUsers" :key="user.name">
  <p>{{ user.name }}</p>
  <p>{{ user.age }}</p>
  <p>{{ user.gender }}</p>
</div>

Dengan arahan v-for, kami mengulangi tatasusunan Pengguna yang ditapis dan memaparkan nama, umur dan jantina setiap pengguna.

Pada ketika ini, kami telah menyelesaikan pelaksanaan penapisan dan penapisan data berdasarkan pemprosesan borang Vue. Selepas pengguna memasukkan syarat penapisan, halaman akan menapis dan memaparkan data secara automatik berdasarkan syarat. Jika perlu, kami juga boleh mengoptimumkan dan mengembangkan kod untuk menambah lebih banyak keadaan dan fungsi penapisan.

Ringkasan:
Artikel ini memperkenalkan cara menggunakan pemprosesan borang Vue untuk melaksanakan fungsi penapisan dan penapisan data. Dengan mencipta borang dalam templat Vue dan menggunakan arahan model v untuk mengikat nilai input borang secara dwiarah kepada data dalam contoh Vue, kami boleh mendapatkan syarat penapisan pengguna dalam masa nyata. Seterusnya, dengan menentukan kaedah untuk mengendalikan acara penyerahan borang dan menapis serta menapis data berdasarkan syarat penapisan yang dimasukkan oleh pengguna, kita boleh mendapatkan koleksi data yang memenuhi syarat tersebut. Akhir sekali, dengan melintasi hasil penapis dalam templat, kami boleh memaparkan data yang ditapis kepada pengguna. Kaedah pemprosesan borang berasaskan Vue ini membolehkan pengguna menapis dan mencari data yang diperlukan secara fleksibel mengikut keperluan mereka sendiri, meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Cara menggunakan pemprosesan borang Vue untuk melaksanakan penapisan dan penapisan data borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!