vue中v-showとv-ifの違いとv-showの使い方
一、公式解釈：
1.v-ifは「真」の条件レンダリングであり、スイッチング中の条件ブロック内のイベントモニターとサブアセンブリが適切に破壊され再構成されることを保証するからである。
2.v-ifも惰性です。もし初期レンダリング時に条件が偽であれば、何もしません。条件が初めて本物になる時に条件ブロックをレンダリングします。
3.対照的に、v-showはより単純である――初期条件にかかわらず、要素は常にレンダリングされ、簡単にCSSに基づいて切り替えるだけである。
4.一般的には、v-ifはより高いスイッチングオーバーヘッドがあり、v-showはより高い初期レンダリングオーバーヘッドがある。したがって、非常に頻繁に切り替えが必要であれば、v−を使用する。
ショーがいいです運行時に条件があまり変わらないなら、v-ifを使ったほうがいいです。
二、個人理解：
1.同じ点：v-showとv-ifは元素の表示と非表示を制御できます。
2.異なる点：
•本質的な方法の異なる◦v-showを実現するのは、cssのdisplayを設定することによってnoneに設定し、隠し制御することです。
◦v-ifはDOMツリーに動的にDOM要素を追加または削除します。
•コンパイルの違い◦v-showは、cssを制御しています。
◦v-if切り替えは、ローカルコンパイル/アンインストールのプロセスがあり、切り替え中に内部のイベント傍受とサブアセンブリを適切に破壊し、再構築することができます。
•コンパイルの条件◦v-showはいずれもコンパイルされます。初期値はfalseで、displayをnoneに設定するだけですが、それもコンパイルされました。
◦v-if初期値はfalseですので、コンパイルはできません。
•性能◦v-showは一回だけコンパイルして、後はcssを制御します。v-ifは絶えず破壊と作成しますので、v-showの性能はもっといいです。
◦注意点：v-showは実際にdisplay:“”またはnoneを操作していますので、css自体にdisplay:noneがある場合、v-showは表示させられません。
◦まとめ：あるノードを頻繁に切り替える場合はv-show（trueやfalseの初期でもレンダリングが行われます。その後はcssで表示を制御します。したがって、スイッチングオーバヘッドが小さく、初期オーバヘッドが大きいです。）を使用し、頻繁にノードを切り替える必要がない場合はv-infを使用します。しかし、dom要素を追加して削除することにより、表示と非表示を制御するので、初期レンダリングオーバヘッドが小さく、スイッチングオーバヘッドが大きい）
vue指令のv-showの使い方
1、元素の表示や非表示を判断する
2、三目演算子の判断
締め括りをつける
以上は小编が绍介したvue中v-showとv-ifの异同及びv-showの使い方です。皆さんに助けてほしいです。もし何かご质问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
1.v-ifは「真」の条件レンダリングであり、スイッチング中の条件ブロック内のイベントモニターとサブアセンブリが適切に破壊され再構成されることを保証するからである。
2.v-ifも惰性です。もし初期レンダリング時に条件が偽であれば、何もしません。条件が初めて本物になる時に条件ブロックをレンダリングします。
3.対照的に、v-showはより単純である――初期条件にかかわらず、要素は常にレンダリングされ、簡単にCSSに基づいて切り替えるだけである。
4.一般的には、v-ifはより高いスイッチングオーバーヘッドがあり、v-showはより高い初期レンダリングオーバーヘッドがある。したがって、非常に頻繁に切り替えが必要であれば、v−を使用する。
ショーがいいです運行時に条件があまり変わらないなら、v-ifを使ったほうがいいです。
二、個人理解：
1.同じ点：v-showとv-ifは元素の表示と非表示を制御できます。
2.異なる点：
•本質的な方法の異なる◦v-showを実現するのは、cssのdisplayを設定することによってnoneに設定し、隠し制御することです。
◦v-ifはDOMツリーに動的にDOM要素を追加または削除します。
•コンパイルの違い◦v-showは、cssを制御しています。
◦v-if切り替えは、ローカルコンパイル/アンインストールのプロセスがあり、切り替え中に内部のイベント傍受とサブアセンブリを適切に破壊し、再構築することができます。
•コンパイルの条件◦v-showはいずれもコンパイルされます。初期値はfalseで、displayをnoneに設定するだけですが、それもコンパイルされました。
◦v-if初期値はfalseですので、コンパイルはできません。
•性能◦v-showは一回だけコンパイルして、後はcssを制御します。v-ifは絶えず破壊と作成しますので、v-showの性能はもっといいです。
◦注意点：v-showは実際にdisplay:“”またはnoneを操作していますので、css自体にdisplay:noneがある場合、v-showは表示させられません。
◦まとめ：あるノードを頻繁に切り替える場合はv-show（trueやfalseの初期でもレンダリングが行われます。その後はcssで表示を制御します。したがって、スイッチングオーバヘッドが小さく、初期オーバヘッドが大きいです。）を使用し、頻繁にノードを切り替える必要がない場合はv-infを使用します。しかし、dom要素を追加して削除することにより、表示と非表示を制御するので、初期レンダリングオーバヘッドが小さく、スイッチングオーバヘッドが大きい）
vue指令のv-showの使い方
1、元素の表示や非表示を判断する
<el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary"> <i class="el-icon-upload el-icon--right"></i></el-button>2、三目演算子の判断
<a class="warn" v-show="true ? item.ai != null : item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>
<a class="warn" v-show="!item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>締め括りをつける
以上は小编が绍介したvue中v-showとv-ifの异同及びv-showの使い方です。皆さんに助けてほしいです。もし何かご质问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。