uniapp点击隐藏显示数据列表

需求背景

在app开发中，数据的显示和隐藏是经常用到的功能。在uniapp中，可以使用v-show和v-if来实现数据的显示和隐藏。其中，v-show在数据不显示的情况下，仍然占用页面空间，而v-if在数据不显示的情况下，不会占用页面空间。

<!-- 使用v-show实现数据列表的显示和隐藏 -->
<template>
  <div>
    <button @click="showList = !showList">{{showList ? '隐藏列表' : '显示列表'}}</button>
    <ul v-show="showList">
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: false,
      list: ['数据1', '数据2', '数据3', '数据4']
    }
  }
}
</script>

需求分析

点击按钮，显示或隐藏数据列表。可以采用两种方式实现：使用v-show或使用v-if。

<!-- 使用v-if实现数据列表的显示和隐藏 -->
<template>
  <div>
    <button @click="showList = !showList">{{showList ? '隐藏列表' : '显示列表'}}</button>
    <ul v-if="showList">
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: false,
      list: ['数据1', '数据2', '数据3', '数据4']
    }
  }
}
</script>

需求实现

通过点击按钮，控制showList的值，从而实现数据列表的显示和隐藏。

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

<script>
export default {
  data() {
    return {
      showList: false,
      list: ['数据1', '数据2', '数据3', '数据4']
    }
  },
  methods: {
    toggleList() {
      this.showList = !this.showList
    }
  }
}
</script>

需求规范

为了提高代码的可读性和可维护性，需要规范代码的命名和注释。对于数据列表的显示和隐藏功能，可以参照以下规范：

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

<script>
/**
 * 数据列表显示和隐藏组件
 */
export default {
  data() {
    return {
      // 是否显示数据列表
      showList: false,
      // 数据列表
      list: ['数据1', '数据2', '数据3', '数据4']
    }
  },
  methods: {
    /**
     * 切换数据列表的显示和隐藏状态
     */
    toggleList() {
      this.showList = !this.showList
    }
  }
}
</script>