uniapp click to hide and display data list

With the popularity of mobile applications, more and more web developers have begun to come into contact with uniapp, a cross-platform mobile application development framework. When developing mobile applications, we often need to display a list of data and hope that users can expand or hide it by clicking a button. This requirement is also very common in uniapp. This article mainly introduces how to implement the function of clicking to hide and display the data list in uniapp.

1. Implementation method

In uniapp, the common way to hide and display the data list is to control the rendering mode of the data list to achieve the effect of expansion or hiding. In the specific implementation process, it can be achieved in the following two ways:

1. Control the rendering of the list through the v-if directive

In the template, you can use The v-if directive determines whether the data list needs to be rendered.

For example, define a Boolean type variable isShowList to indicate whether the data list needs to be displayed.

<template>
  <div>
    <button @click="switchShowList">显示/隐藏列表</button>
    <ul v-if="isShowList">
      <li v-for="(item,index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

In the above template, we use v-if="isShowList" to determine whether the current data list needs to be rendered. If isShowList is true, the data list will be rendered on the page, otherwise, the data list will not be rendered.

2. Controlling the display and hiding of the list through the v-show directive

The v-show directive is similar to the v-if directive. Use it to control whether elements are displayed on the page.

<template>
  <div>
    <button @click="switchShowList">显示/隐藏列表</button>
    <ul v-show="isShowList">
      <li v-for="(item,index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

In the above template, we use v-show="isShowList" to determine whether the current data list needs to be displayed. If isShowList is true, the data list will be displayed on the page, otherwise, the data list will be hidden.

2. Complete example

Next, let’s look at a complete code example, including controlling the expansion and hiding of the data list and implementing the click event of the button.

<template>
  <div>
    <button @click="switchShowList">显示/隐藏列表</button>
    <ul v-show="isShowList">
      <li v-for="(item,index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: ['条目1', '条目2', '条目3', '条目4', '条目5'],
      isShowList: false,
    };
  },
  methods: {
    switchShowList() {
      this.isShowList = !this.isShowList;
    },
  },
};
</script>

In this example, we first define two status data dataList and isShowList. dataList is used to store the data in the list, and isShowList is used to determine whether the list needs to be displayed.

Next, in the template code, we use the v-show directive to control the display and hiding of the data list. When isShowList is true, the data list will be displayed on the page; otherwise, it will not be displayed.

Finally, we defined a click event in the button element and bound the event to the switchShowList method. In the switchShowList method, we use a simple ternary operator to flip the value of isShowList.

3. Summary

In uniapp development, the need to display a data list and expand or hide it through buttons is very common. Through the introduction of this article, you already know how to achieve this requirement by using the v-if or v-show command.

At the same time, if you also want to improve your page presentation, you may consider using some UI component libraries to help you render better-looking, more professional pages. Uni-app has built-in some commonly used UI component libraries, such as Vant, Mint-UI, etc. They provide very convenient, out-of-the-box components that can help you quickly build beautiful, efficient, and easy-to-use mobile applications. .

The above is the detailed content of uniapp click to hide and display data list. For more information, please follow other related articles on the PHP Chinese website!