Bagaimana untuk melaksanakan fungsi klik-untuk-tunjuk-sembunyikan dalam uniapp

UniApp ialah rangka kerja pembangunan merentas platform berdasarkan rangka kerja Vue.js Ia boleh membolehkan satu kod dijalankan pada berbilang platform, seperti H5, program mini, APP, dsb. Artikel ini akan memperkenalkan cara melaksanakan fungsi klik-untuk-tunjuk-sembunyikan dalam UniApp.

1. Buat Halaman

Mula-mula, anda perlu membuat halaman dalam UniApp. Dalam UniApp, anda boleh mewakili halaman dengan mencipta fail .vue dalam direktori halaman. Berikut ialah about.vue sebagai contoh.

2. Tambah butang

Tambah butang di about.vue untuk mencetuskan acara yang menunjukkan atau menyembunyikan kandungan.

<template>
  <view>
    <button type="primary" @click="toggleShow">{{ show ? '隐藏' : '显示' }}</button>
  </view>
</template>

Dalam butang ini, @click digunakan untuk mendengar peristiwa klik butang dan memanggil kaedah toggleShow. Antaranya, {{ show ? 'Hide' : 'Show' }} bermaksud apabila show is true, butang paparan teks ialah "Hide", sebaliknya ia adalah "Show".

3. Tambah kandungan

Untuk melaksanakan fungsi show and hide, anda perlu menambah beberapa kandungan pada about.vue dan mengawal paparannya atau bersembunyi melalui pembolehubah show .

<template>
  <view>
    <button type="primary" @click="toggleShow">{{ show ? '隐藏' : '显示' }}</button>
    <view v-show="show">
      <text>这里是需要显示或隐藏的内容</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      toggleShow() {
        this.show = !this.show
      }
    }
  }
</script>

Dalam kod ini, arahan v-show digunakan untuk mengawal paparan dan penyembunyian kandungan berdasarkan pembolehubah rancangan. Apabila rancangan adalah benar, kandungan dipaparkan jika tidak, kandungan itu tersembunyi. Pada masa yang sama, kaedah toggleShow digunakan untuk menukar nilai pembolehubah tunjukkan dan bertukar antara menunjukkan dan menyembunyikan.

4. Ujian

Selepas menambah kod di atas, anda boleh menjalankan projek uniapp dan menguji sama ada mengklik butang boleh memaparkan atau menyembunyikan kandungan dalam halaman perihal.

Ringkasan

Artikel ini memperkenalkan cara melaksanakan fungsi klik-untuk-tunjuk-sembunyi dalam UniApp. Fungsi ini boleh dilaksanakan dengan mudah dengan menambahkan butang pada templat dan menukar paparan dan menyembunyikan kandungan berdasarkan peristiwa klik butang. Dalam pembangunan aplikasi sebenar, reka bentuk dan pelaksanaan templat dan logik yang lebih kompleks boleh dilakukan mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi klik-untuk-tunjuk-sembunyikan dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!