Bagaimana untuk melaksanakan fungsi tersembunyi kotak input dalam vue

Dengan pembangunan aplikasi web, lebih banyak senario perniagaan memerlukan pengguna memasukkan data, dan kotak input pengguna ialah salah satu komponen yang diperlukan untuk mencapai matlamat ini. Walau bagaimanapun, dalam beberapa kes, kita perlu menyembunyikan kotak input Sudah tentu, ini bukan untuk menyembunyikan kotak input sepenuhnya, tetapi untuk menyembunyikan sebahagian daripada kotak input, seperti kata laluan yang dimasukkan, dll. Sangat mudah untuk menyembunyikan kotak input dalam Vue Artikel ini akan membawa anda memahami butiran pelaksanaan.

Pertama, kita perlu memahami apa itu Vue. Vue ialah rangka kerja progresif untuk membina antara muka pengguna. Vue boleh disepadukan dengan mudah dengan perpustakaan lain atau projek sedia ada, dan ia juga menyediakan API yang sangat mudah yang membolehkan pengguna melengkapkan pelbagai interaksi UI dengan mudah.

Seterusnya, kita perlu memahami beberapa konsep penting dalam Vue, iaitu contoh Vue, komponen, prop, peristiwa dan sifat yang dikira.

• Contoh Vue: Ia ialah konsep teras Vue dan merupakan objek yang dicipta dengan Vue baharu. Semua sifat dan kaedah dalam tika Vue boleh diakses melalui tika, dan pelbagai tingkah laku Vue juga boleh dikawal melalui kaedah kitaran hayat tika Vue.
• Komponen: Ia adalah modul bebas dalam Vue yang boleh membantu kami memecahkan kod kepada bahagian yang lebih kecil dan lebih mudah untuk disusun Oleh itu, komponen merupakan konsep yang sangat penting dalam Vue.
• Props: ialah objek sifat komponen Vue, digunakan untuk menghantar data kepada komponen. Props ialah aliran data sehala, iaitu, komponen induk boleh menghantar data kepada komponen anak, tetapi komponen anak tidak boleh mengubah suai secara langsung nilai dalam prop.
• Acara: Boleh digunakan untuk mendengar dan membalas acara DOM Vue menyediakan beberapa pengubah suai acara terbina dalam untuk mengendalikan acara yang berbeza.
• Sifat dikira: Digunakan untuk mengira sifat berdasarkan nilai pembolehubah lain ialah konsep penting dalam Vue dan sering digunakan untuk pengiraan sifat dan pengiraan dinamik dalam komponen.

Setelah memahami konsep ini, kita boleh mula melaksanakan fungsi menyembunyikan kotak input. Pertama, kita perlu mencipta contoh Vue baharu dan menambah komponen textInput. Komponen ini memerlukan prop untuk mengawal sama ada kotak input disembunyikan. Berikut ialah kod komponen ini:

// textInput.vue
<template>
  <div>
    <input 
      type="text" 
      :value="inputValue"
      @input="handleInput"
      v-if="!hidden"
    />
    <input 
      type="password" 
      :value="inputValue"
      @input="handleInput"
      v-if="hidden"
    />
  </div>
</template>

<script>
  export default {
    name: 'textInput',
    props: {
      hidden: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      handleInput(e) {
        this.inputValue = e.target.value
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

Dalam komponen ini, kami mentakrifkan dua kotak input, satu ialah kotak input teks biasa dan satu lagi ialah kotak input kata laluan atribut jenis itu. Kedua-dua kotak input terikat pada pembolehubah nilai input, yang digunakan untuk menyimpan nilai input. Pada masa yang sama, mereka juga terikat kepada peristiwa input Apabila pengguna memasukkan dalam kotak input, kami akan mengemas kini nilai pembolehubah inputValue dan mencetuskan peristiwa input.

Dalam komponen, kami menggunakan arahan v-if untuk mengawal sama ada kotak input disembunyikan. Jika tersembunyi adalah palsu, kotak input teks biasa dipaparkan jika tersembunyi adalah benar, kotak input kata laluan dipaparkan. Props juga digunakan di sini untuk menghantar atribut tersembunyi kepada komponen.

Seterusnya, kita perlu menggunakan komponen ini dalam tika Vue dan mengawal penyembunyiannya melalui pembolehubah input tersuai kami. Berikut ialah kod pelaksanaan:

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ hideInput ? 'Show' : 'Hide' }} input
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

Dalam contoh Vue ini, kami memperkenalkan komponen yang ditulis di atas dan mentakrifkan dua pembolehubah: input dan hideInput. Antaranya, pembolehubah input digunakan untuk menyimpan nilai dalam kotak input, dan pembolehubah hideInput digunakan untuk mengawal penyembunyian kotak input.

Kami memberikan komponen dalam templat dan menghantar pembolehubah hideInput sebagai parameter untuk mengawal sama ada kotak input disembunyikan. Kami juga menambah butang untuk menogol nilai pembolehubah hideInput untuk menogol sama ada untuk menggunakan kata laluan dalam kotak input.

Akhir sekali, kita perlu menambah harta yang dikira pada contoh Vue untuk mengawal teks yang dipaparkan pada butang. Berikut ialah kod khusus:

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ buttonText }}
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    computed: {
      buttonText() {
        return this.hideInput ? 'Show' : 'Hide' + ' input'
      }
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

Di sini kami menambah butang atribut yang dikiraTeks untuk menentukan teks yang dipaparkan pada butang berdasarkan nilai hideInput. Dengan cara ini, apabila hideInput adalah palsu, teks butang ialah "Sembunyikan input", dan apabila hideInput adalah benar, teks butang ialah "Tunjukkan input".

Dengan kod di atas, kami boleh melaksanakan fungsi menyembunyikan kotak input melalui Vue dengan mudah. Ringkasnya, untuk menyembunyikan kotak input dalam Vue, anda perlu menentukan komponen yang mengandungi dua kotak input, menyampaikan maklumat sama ada untuk menyembunyikannya melalui prop, dan juga menambah sifat yang dikira untuk mengawal teks yang dipaparkan pada butang kotak input tersembunyi.

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