uniapp コンポーネントを動的に非表示および表示する方法

モバイル アプリケーションの継続的な開発に伴い、開発者はリッチ ユーザー インターフェイスを構築する際に、さまざまなコンポーネントを動的に非表示にしたり表示したりできる必要があります。 uniapp では、動的プロパティ バインディングと vue コンポーネントの条件付きレンダリングを使用して、この目標を達成できます。この記事では、この機能を実現するさまざまな方法とその長所と短所について説明します。

まず、最も単純で直接的な方法、v-show コマンドを使用する方法を見てみましょう。 v-show ディレクティブの機能は、式の値に基づいて要素が表示されるかどうかを決定することです。式が true と評価されると要素は表示され、それ以外の場合は要素は非表示になります。

uniapp では、v-show ディレクティブの使用は非常に簡単で、非表示または表示する必要があるコンポーネントにそれを追加し、その値をブール変数に設定するだけです。 v-show ディレクティブを使用してボタンを非表示または表示する例を次に示します。

<template>
  <button>点击我</button>
</template>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

上の例では、ボタンに v-show ディレクティブを使用し、その値をデータ プロパティ showBtn にバインドしました。 。 showBtn の値が true の場合、ボタンは表示され、showBtn の値が false の場合、ボタンは非表示になります。メソッド HideBtn および showBtn を呼び出すことにより、showBtn の値を動的に変更してボタンを非表示にしたり表示したりすることができます。

v-show ディレクティブの利点は、実際に DOM から要素を削除するのではなく、要素をドキュメント内に保持し、CSS によって非表示にするだけであることです。これは、要素を再表示する必要がある場合、要素の状態が保持されることを意味します。ただし、v-show ディレクティブの欠点は、要素が更新されるたびに DOM 操作が必要となり、パフォーマンスに影響を与える可能性があることです。

要素を表示または非表示にする 2 番目の方法は、v-if ディレクティブを使用することです。 v-show ディレクティブとは異なり、v-if ディレクティブは式の値に基づいて要素が DOM に存在するかどうかを決定します。式が true と評価されると、要素は DOM 内に存在しますが、それ以外の場合、要素は DOM から削除されます。

uniapp では、v-if 命令の使用も非常に簡単です。非表示または表示する必要があるコンポーネントにそれを追加し、その値をブール変数に設定するだけです。 v-if ディレクティブを使用してボタンを非表示または表示する例を次に示します。

<template>
  <button>点击我</button>
</template>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

上の例では、ボタンに v-if ディレクティブを使用し、その値をデータ プロパティ showBtn にバインドしました。 。 showBtn の値が true の場合、ボタンは DOM に存在し、showBtn の値が false の場合、ボタンは DOM から削除されます。メソッド HideBtn および showBtn を呼び出すことにより、showBtn の値を動的に変更してボタンを非表示にしたり表示したりすることができます。

v-if ディレクティブの利点は、要素が更新されるたびに必要な DOM 操作のみを実行するため、パフォーマンスへの影響が少ないことです。ただし、v-if ディレクティブの欠点は、要素が DOM から削除されると、この要素の状態も削除されることです。要素を再表示する必要がある場合は、要素とその状態を再作成する必要があります。パフォーマンスに影響を与える可能性があります。

最後に、要素を表示および非表示にする 3 番目の方法を見てみましょう。v-bind 命令を使用して、要素のクラスを動的に変更します。要素のクラスを変更すると、要素のスタイルを変更でき、それによって要素を非表示にしたり表示したりできます。

uniapp では、v-bind ディレクティブを使用して動的クラスをコンポーネントにバインドできます。式の値が true の場合、コンポーネントはこのクラスを追加し、それ以外の場合、コンポーネントはこのクラスを削除します。以下は、v-bind ディレクティブを使用してボタンを非表示にしたり表示したりする例です。

<template>
  <button>点击我</button>
</template>

<style>
.hidden {
  display: none;
}
</style>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

上の例では、v-bind ディレクティブを使用して、非表示の動的クラスをボタンにバインドします。 showBtn の値が false の場合、このクラスがボタンに追加されてボタンが非表示になり、showBtn の値が true の場合、このクラスが削除されてボタンが表示されます。同時に、スタイル シートで .hidden クラスを定義し、要素の非表示と表示を行うボタンを「display: none」に設定する必要があります。

v-show ディレクティブとは異なり、v-bind ディレクティブを使用する利点は、要素の表示状態を変更するだけでなく、要素のクラスを変更することで、より多くのスタイル変更を実現できることです。欠点は、要素のスタイルを設定するために CSS を使用する必要があり、パフォーマンスに影響を与える可能性があることです。

要約すると、要素を非表示にしたり表示したりする方法はたくさんあります。uniapp では、v-show 命令、v-if 命令を選択するか、v-bind 命令を使用して要素のクラスを動的に変更できます。要素。各方法には独自の長所と短所があり、特定のニーズやシナリオに応じて最適な方法を選択する必要があります。

以上がuniapp コンポーネントを動的に非表示および表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。