Bagaimana untuk menyediakan borang tersembunyi dalam vue

Kata Pengantar

Dalam pembangunan bahagian hadapan, borang adalah bahagian yang sangat diperlukan. Ia membantu kami mengumpul maklumat pengguna dan mencapai kesan interaktif. Walau bagaimanapun, terdapat beberapa situasi, seperti keperluan untuk memuat naik fail secara tidak segerak Pada masa ini, kami perlu memuat naik fail tanpa memuat semula halaman Pada masa ini, borang boleh disembunyikan untuk mencapai penyegaran separa.

Jadi bagaimana untuk melaksanakan fungsi menyembunyikan borang dalam Vue? Artikel ini akan memperkenalkan tiga kaedah, iaitu v-show, v-if, dan computed. Prinsip pelaksanaan ketiga-tiganya berbeza sedikit, sila lihat di bawah untuk mendapatkan butiran.

1. Gunakan arahan v-show

Arahan v-show hanya mengawal paparan dan bersembunyi semasa membuat DOM, tetapi elemen paparan masih wujud dalam struktur DOM , cuma gaya berbeza sahaja.

Kod contoh:

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <form v-show="isShowForm" @submit.prevent="handleSubmit">
      <input type="text" placeholder="请输入您的姓名" v-model="name" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Pelaksanaan kod di atas adalah sangat mudah, menggunakan butang untuk mengawal paparan dan penyembunyian borang. Arahan v-show secara langsung mengikat data isShowForm, dan menentukan sama ada borang dipaparkan berdasarkan nilai benar atau palsu nilainya.

2. Gunakan arahan v-if

Arahan v-if masih agak biasa untuk mengawal paparan dan menyembunyikan elemen. Perbezaannya ialah ia menambah/mengalih keluar elemen dari dalam DOM.

Kod sampel:

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <template v-if="isShowForm">
      <form @submit.prevent="handleSubmit">
        <input type="text" v-model="name" placeholder="请输入您的姓名" />
        <button type="submit">提交</button>
      </form>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Tidak seperti v-show, v-if menambah/mengalih keluar elemen DOM pada pepohon penjanaan DOM. Oleh itu, menggunakan v-if boleh mengurangkan penggunaan sumber apabila elemen tidak dipaparkan ke halaman.

3. Gunakan sifat yang dikira

Walaupun sifat yang dikira dilaksanakan sama dengan kaedah, mekanisme cachingnya berbeza daripada kaedah. Iaitu, harta yang dikira hanya akan dinilai semula apabila kebergantungannya berubah, dan disebabkan oleh cachenya, apabila berbilang komponen memanggil sifat yang dikira yang sama, ia hanya akan dinilai sekali. Oleh itu, menggunakan sifat yang dikira boleh mencapai pengoptimuman prestasi yang berkesan dalam Vue.js.

Kod sampel:

<template>
  <div>
    <button @click="toggleForm">显示/隐藏表单</button>
    <form @submit.prevent="handleSubmit" v-if="shouldShowForm">
      <input type="text" v-model="name" placeholder="请输入您的姓名" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  computed: {
    shouldShowForm: function() {
      return this.isShowForm;
    },
  },
  methods: {
    toggleForm() {
      this.isShowForm = !this.isShowForm;
    },
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Dalam contoh di atas, kami merangkum fungsi kaedah ke dalam sifat yang dikira. Disebabkan oleh ciri caching bagi sifat yang dikira, nilai shouldShowModal akan dikira semula secara aktif hanya apabila nilai isShowForm berubah secara serentak.

Ringkasan

Tiga kaedah ini boleh mencapai kesan menyembunyikan borang. v-show dilaksanakan dengan mengawal paparan dan menyembunyikan gaya CSS v-if menambah/mengalih keluar elemen pada pepohon DOM yang dikira memproses nilai isShowForm dalam atribut yang dikira. Pendekatan yang berbeza boleh diambil untuk senario yang berbeza.

Sudah tentu, jika kita hanya perlu menyembunyikan kawalan bentuk tertentu, kita juga boleh menggunakan gaya v-model dan css untuk mencapai ini. Oleh itu, untuk masalah seperti menyembunyikan borang, memilih kaedah yang paling mudah dan berkesan berdasarkan keperluan sebenar adalah penyelesaian terbaik.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan borang tersembunyi dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!