uniapp cliquez pour masquer et afficher la liste des données-uni-app-php.cn

uniapp cliquez pour masquer et afficher la liste des données

WBOY

Libérer： 2023-05-26 12:05:37

original

1345 Les gens l'ont consulté

Avec la popularité des applications mobiles, de plus en plus de développeurs Web ont commencé à entrer en contact avec uniapp, un framework de développement d'applications mobiles multiplateforme. Lors du développement d'applications mobiles, nous devons souvent afficher une liste de données et espérer que les utilisateurs pourront la développer ou la masquer en cliquant sur un bouton. Cette exigence est également très courante dans Uniapp. Cet article présente principalement comment implémenter la fonction de clic pour masquer et afficher la liste de données dans uniapp.

1. Méthode de mise en œuvre

Dans uniapp, la manière courante de masquer et d'afficher la liste de données consiste à contrôler la méthode de rendu de la liste de données pour obtenir l'effet d'expansion ou de masquage. Dans le processus de mise en œuvre spécifique, cela peut être réalisé des deux manières suivantes :

Contrôlez le rendu de la liste via l'instruction v-if

Dans le modèle, vous pouvez utiliser l'instruction v-if pour déterminer si vous besoin de restituer la liste de données.

Par exemple, définissez une variable de type booléen isShowList pour indiquer si la liste de données doit être affichée. 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>

Copier après la connexion

在上面的模板中，我们通过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>

Copier après la connexion

在上面的模板中，我们通过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>

Copier après la connexion

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

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

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

三、总结

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

Dans le modèle ci-dessus, nous utilisons v-if="isShowList" pour déterminer si la liste de données actuelle doit être restituée. Si isShowList est true, la liste de données sera rendue sur la page, sinon, la liste de données ne sera pas rendue.

v-show="isShowList"

isShowList

true

dataList

isShowList

dataList

isShowList

v-show

isShowList

true

click

switchShowList