vuejs で v-show を使用すると機能しない理由は何ですか?

今回は、vuejs で v-show を使用するとうまくいかない理由について説明します。vuejs で v-show を使用する際の 注意事項 について説明します。実際のケースを見てみましょう。

1.公式サイトのコンセプト説明

v-if は、条件付きブロック内の

eventリスナーとサブコンポーネントが切り替え中に適切に破棄され、再構築されるようにするため、「true」の条件付きレンダリングです。

v-if も遅延型で、最初のレンダリング中に条件が false の場合は何も行われません。これに比べて、v-show は非常に単純です。 - - 初期条件が何であっても、要素は常にレンダリングされ、CSS に基づいて単純に切り替えられます。

一般に、v-if はスイッチング オーバーヘッドが高く、v-show はレンダリング オーバーヘッドが高くなります。したがって、非常に頻繁なスイッチングが必要な場合は、実行時の条件が良好でない場合は v-show を使用することをお勧めします。変更される可能性がありますので、v-if を使用することをお勧めします。

2.実践結果

抜粋: v-if を使用すると、dom 構造全体がページに表示されません。 v-show を使用すると、true の場合は表示されます。次に、On style="<a href="http://www.php.cn/wiki/927.html" target="_blank">display<p style="text-align: left;">:none</p></a>" を追加します。これはコンポーネントです。このような大きなものには、一時的に非表示にし、後で表示するものであれば、v-show を使用する方が便利だと個人的に思います。 v-style と v-show を比較すると、v-show は v-style="display:none" および v-style="display:block" と同等です。 。 style=”<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:none”. 所以呢，如果是组件之类的大块头，个人觉得用v-if更好一些，如果是一些暂时性隐藏，一会要显示的,还是v-show更方便。对于v-style和v-show来比较，v-show相当于是v-style=”display:none”和v-style=”display:block

1. v-show が動作しない問題

最近、

を使用していませんvue_element-ui开发多页面应用,其中遇到v-show

a. 問題の説明、以下に示すように (予想される効果)、バックグラウンド データに基づいて変更されるタイトルを含め、テーブル データが動的に変更されます。それ以外の場合、この列の内容は表示されません。 すると、上の図に示す効果が表示されます。つまり、v-show は、タイトル値が null のデータ列を非表示にできませんでした

b.解決策: 図 1 の効果を実現するには、v-show を v-if に変更します。

c. 概要 (個人的な意見): el-table-column は複数行のラベル要素を生成するため、v-show はテンプレート構文をサポートしていないため、v-show は複数の要素を表示または非表示にすることができないと推測できます

? このように理解できます、神が教えてくれるといいのですが、この場合、それは v-if でのみ実現できます

さらに、複数の要素をレンダリングする場合は、<template> 要素をパッケージ化要素として使用し、それに v-if を使用して 条件判断

により、最終的なレンダリングにはこの要素は含まれません。同時に、v-show は < をサポートしません。 template> code> 文法.

<template>元素作为包装元素,并在上面使用v-if进行条件判断,最终的渲染并不会包含这个元素.同时,v-show不支持<template>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.jsを改善するために知っておくべきことのまとめ

Vueの計算プロパティの詳細な説明

以上がvuejs で v-show を使用すると機能しない理由は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。