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

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 :

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

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

2. 通过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

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.

Contrôlez l'affichage et le masquage de la liste via la commande v-show🎜🎜🎜La commande v-show est similaire à la commande v-if. Utilisez-la pour contrôler si les éléments sont affichés. la page. 🎜rrreee🎜Dans le modèle ci-dessus, nous utilisons v-show="isShowList" pour déterminer si la liste de données actuelle doit être affichée. Si isShowList vaut true, la liste de données sera affichée sur la page, sinon, la liste de données sera masquée. 🎜🎜2. Exemple complet🎜🎜Ensuite, examinons un exemple de code complet, comprenant le contrôle de l'expansion et du masquage de la liste de données et l'implémentation de l'événement de clic du bouton. 🎜rrreee🎜Dans cet exemple, nous définissons d'abord deux données d'état dataList et isShowList. dataList est utilisé pour stocker les données dans la liste, et isShowList est utilisé pour déterminer si la liste doit être affichée. 🎜🎜Ensuite, dans le code du modèle, nous utilisons la directive v-show pour contrôler l'affichage et le masquage de la liste de données. Lorsque isShowList vaut true, la liste de données sera affichée sur la page ; sinon, elle ne sera pas affichée. 🎜🎜Enfin, nous avons défini un événement click dans l'élément bouton et lié l'événement à la méthode switchShowList. Dans la méthode switchShowList, nous utilisons un simple opérateur ternaire pour inverser la valeur de isShowList. 🎜🎜3. Résumé🎜🎜Dans le développement d'Uniapp, la nécessité d'afficher une liste de données et de la développer ou de la masquer via des boutons est très courante. Grâce à l'introduction de cet article, vous savez déjà comment répondre à cette exigence en utilisant la directive v-if ou v-show. 🎜🎜Dans le même temps, si vous souhaitez également améliorer la présentation de votre page, vous pouvez envisager d'utiliser certaines bibliothèques de composants d'interface utilisateur pour vous aider à rendre des pages plus belles et plus professionnelles. Uni-app intègre certaines bibliothèques de composants d'interface utilisateur couramment utilisées, telles que Vant, Mint-UI, etc., qui fournissent des composants très pratiques et prêts à l'emploi qui peuvent vous aider à créer rapidement des applications belles, efficaces et simples. -utiliser des applications mobiles. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!