How to implement click-to-show-hide function in uniapp

UniApp is a cross-platform development framework based on the Vue.js framework. It can enable one code to run on multiple platforms, such as H5, mini programs, APPs, etc. This article will introduce how to implement the click-to-show-hide function in UniApp.

1. Create page

First, you need to create a page in UniApp. In UniApp, you can represent a page by creating a .vue file in the pages directory. Here is about.vue as an example.

2. Add button

Add a button in about.vue to trigger events that show or hide content.

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

In this button, @click is used to listen to the click event of the button and call the toggleShow method. Among them, {{ show ? 'Hide' : 'Show' }} means that when show is true, the button display text is "Hide", otherwise it is "Show".

3. Add content

In order to implement the show and hide function, you need to add some content to about.vue and control its display or hiding through the show variable.

<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>

In this code, the v-show instruction is used to control the display and hiding of content based on the show variable. When show is true, the content is displayed; otherwise, the content is hidden. At the same time, the toggleShow method is used to change the value of the show variable and switch between showing and hiding.

4. Test

After adding the above code, you can run the uniapp project and test whether clicking the button can display or hide content in the about page.

Summary

This article introduces how to implement the click-to-show-hide function in UniApp. This function can be easily implemented by adding a button to the template and switching the display and hiding of the content based on the click event of the button. In actual application development, more complex design and implementation of templates and logic can be carried out as needed.

The above is the detailed content of How to implement click-to-show-hide function in uniapp. For more information, please follow other related articles on the PHP Chinese website!