ホームページ > 記事 > ウェブフロントエンド > Vue の条件付き rendering_vue.js の簡単な理解
この記事は、Vue の条件付きレンダリングを簡単に理解するのに役立ちます。興味のある方は参考にしてください。v-if は単一の要素を表示します
。 v-if または v-show のみに従ってください
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="test"> <p v-if="isDisplay"> <!--if...else... 单个元素--> 显示我1 </p> <p v-else> 显示我2 </p> </p> <script type="text/javascript"> var myVue =new Vue({ el: ".test", data: { isDisplay: 1 } }) </script> </body> </html>
出力結果は次のとおりです: show me 1
2. v-if は複数の要素を表示し、d477f9ce7bf77f53fbcf36bec1b69b7a と一致させる必要があります else は v-if または v-show のみに従うことに注意してください
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="test"> <template v-if="isDisplay"> <!--if...else... 用template实现多个元素--> <p>显示我1</p> <p>显示我11</p> <p>显示我12</p> <p>显示我13</p> </template> <p v-else> 显示我2 </p> </p> <script type="text/javascript"> var myVue =new Vue({ el: ".test", data: { isDisplay: 1 } }) </script> </body> </html>
出力結果: show me 1 show me 11 show me 12 show me 13
3 v-show は単一要素の表示のみをサポートします。 d477f9ce7bf77f53fbcf36bec1b69b7a に含まれる複数の要素はサポートされません else は v-if または v-show のみに従うことに注意してください
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="test"> <p v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法--> 显示我1 </p> <p v-else> 显示我2 </p> </p> <script type="text/javascript"> var myVue =new Vue({ el: ".test", data: { isDisplay: 1 } }) </script> </body> </html>4. v-if と v-show の違い
(1)v-if は実際のレンダリングとアンロードですが、最初のレンダリングの後、結果はキャッシュされます
(2)v-show 要素は常にコンパイルされて保持され、CSS に基づいて単純に切り替えられます
(3) ) 要約: v-show を頻繁に切り替える必要がある場合は、実行時に条件が変化する可能性が低い場合は、v-if の方が適しています。 Tree/master /lesson08
関連する推奨事項:
Vue 条件付きレンダリングの簡単な理解以上がVue の条件付き rendering_vue.js の簡単な理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。