uniapp을 클릭하면 데이터 목록을 숨기고 표시할 수 있습니다.-uni-app-php.cn

uniapp을 클릭하면 데이터 목록을 숨기고 표시할 수 있습니다.

WBOY

풀어 주다： 2023-05-26 12:05:37

원래의

1326명이 탐색했습니다.

모바일 애플리케이션이 인기를 끌면서 점점 더 많은 웹 개발자가 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크인 uniapp을 접하기 시작했습니다. 모바일 애플리케이션을 개발할 때 데이터 목록을 표시하고 사용자가 버튼을 클릭하여 데이터 목록을 확장하거나 숨길 수 있기를 바라는 경우가 종종 있습니다. 이 요구 사항은 uniapp에서도 매우 일반적입니다. 이번 글에서는 유니앱에서 데이터 목록을 숨기고 표시하는 클릭 기능을 구현하는 방법을 주로 소개합니다.

1. 구현 방법

uniapp에서 데이터 목록을 숨기고 표시하는 일반적인 방법은 데이터 목록의 렌더링 방법을 제어하여 확장 또는 숨기기 효과를 얻는 것입니다. 특정 구현 프로세스에서는 다음 두 가지 방법으로 달성할 수 있습니다.

v-if 명령어를 통해 목록 렌더링을 제어합니다.

템플릿에서 v-if 명령어를 사용하여 데이터 목록을 렌더링해야 합니다.

예를 들어 부울 유형 변수 isShowList를 정의하여 데이터 목록을 표시해야 하는지 여부를 나타냅니다. isShowList，来表示数据列表是否需要展示。

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

로그인 후 복사

在上面的模板中，我们通过v-if="isShowList"来判断当前数据列表是否需要渲染。如果isShowList为true，则数据列表会被渲染到页面上，否则，数据列表将不会被渲染。

通过v-show指令控制列表的显隐

v-show指令与v-if指令类似，使用它可以控制元素在页面上是否显示。

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

로그인 후 복사

在上面的模板中，我们通过v-show="isShowList"来判断当前数据列表是否需要显示。如果isShowList为true，则数据列表会显示在页面上，否则，数据列表将被隐藏。

二、完整示例

接下来，我们来看一个完整的代码示例，包含了控制数据列表的展开和隐藏以及实现按钮的点击事件。

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

로그인 후 복사

在这个示例中，我们首先定义了两个状态数据dataList和isShowList。dataList用来存储列表中的数据，isShowList则用来判定列表是否需要被展示。

接下来，在模板代码中，我们使用了v-show指令来控制数据列表的显隐。当isShowList为true时，数据列表会显示在页面上；反之，则不显示。

最后，我们在button元素中定义了一个click事件，并把事件绑定到了switchShowList方法上。在switchShowList方法中，我们使用了一个简单的三目运算符来翻转isShowList的值。

三、总结

在uniapp开发中，展示数据列表并且可以通过按钮来进行展开或者隐藏的需求很常见。通过本文的介绍，您已经知道了如何通过使用v-if或者v-showrrreee

위 템플릿에서는 v-if="isShowList"를 사용하여 현재 데이터 목록을 렌더링해야 하는지 여부를 결정합니다. isShowList가 true이면 데이터 목록이 페이지에 렌더링되고, 그렇지 않으면 데이터 목록이 렌더링되지 않습니다.

v-show="isShowList"

isShowList

true

dataList

isShowList