uniapp クリックしてデータリストを非表示および表示します

モバイル アプリケーションの人気に伴い、クロスプラットフォームのモバイル アプリケーション開発フレームワークである uniapp を利用する Web 開発者がますます増えています。モバイル アプリケーションを開発する場合、データのリストを表示する必要があり、ユーザーがボタンをクリックしてデータを展開したり非表示にしたりできるようにする必要があることがよくあります。この要件は uniapp でも非常に一般的です。この記事では、uniappでデータ一覧をクリックして非表示・表示する機能の実装方法を中心に紹介します。

1. 実装方法

uniapp では、データ リストの表示と非表示を切り替える一般的な方法は、データ リストのレンダリング モードを制御して展開または非表示の効果を実現することです。特定の実装プロセスでは、次の 2 つの方法でこれを実現できます。

1. v-if ディレクティブを使用してリストのレンダリングを制御する

テンプレート内で、 v-if ディレクティブは、データリストをレンダリングする必要があるかどうかを決定します。

たとえば、データ リストを表示する必要があるかどうかを示すブール型変数 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 の場合、データ リストがページに表示されます。それ以外の場合、データ リストは非表示になります。

2. 完全な例

次に、データ リストの展開と非表示の制御、ボタンのクリック イベントの実装を含む、完全なコード例を見てみましょう。

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

この例では、最初に 2 つのステータス データ dataList と isShowList を定義します。 dataList はリストにデータを保存するために使用され、isShowList はリストを表示する必要があるかどうかを決定するために使用されます。

次に、テンプレート コードで v-show ディレクティブを使用して、データ リストの表示と非表示を制御します。 isShowList が true の場合はページにデータリストが表示されますが、そうでない場合は表示されません。

最後に、ボタン要素で click イベントを定義し、そのイベントを switchShowList メソッドにバインドしました。 switchShowList メソッドでは、単純な三項演算子を使用して isShowList の値を反転します。

3. 概要

ユニアプリ開発では、データリストを表示し、ボタンを使用して展開または非表示にする必要が非常によくあります。この記事の導入により、v-if または v-show コマンドを使用してこの要件を達成する方法がすでにわかりました。

同時に、ページのプレゼンテーションも改善したい場合は、見栄えが良く、よりプロフェッショナルなページをレンダリングできるように、いくつかの UI コンポーネント ライブラリの使用を検討することもできます。 Uni-app には、Vant、Mint-UI などの一般的に使用される UI コンポーネント ライブラリが組み込まれており、美しく、効率的で簡単なアプリを迅速に構築するのに役立つ、非常に便利なすぐに使用できるコンポーネントを提供します。 -モバイルアプリケーションを使用するため。

以上がuniapp クリックしてデータリストを非表示および表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。