v-show v-ifを使用して要素の表示と非表示を設定する

一般的には、要素のdisplayプロパティを設定して要素の表示と非表示を制御できます.

display: none;    //      
display: block;   //       ,         
display: inline;  //       ,          

ここでは、インライン要素とブロックレベル要素を簡単に説明します.
1、ブロックレベルの要素:一般的に新しい行から一定の矩形空間を占め、その幅、高さの属性を設定して矩形の大きさを変えることができます.一般に、ブロックレベル要素は、インライン要素および他のブロックレベル要素を含むことができるが、formが他のブロックレベル要素のみを含む場合、pがインライン要素のみを含む場合もある.div、p、formなどの一般的なブロックレベル要素.一般的なブロックレベル要素にはdiv from talbe p pre h 1-h 6 dl ol ulなどがある.
2、インライン要素:インライン要素、ライン内要素、直進式要素とも呼ばれます.一般的には意味レベル(semantic)に基づく基本要素であり、独自の空間がなく、他のブロックレベル要素に依存して存在するため、一般的にはその幅、高属性を設定することは無効である(特にimgは幅を設定することができる).インライン要素には、テキストおよびその他のインライン要素しか含まれません.span、aなどの一般的なインライン要素.一般的なインライン要素にはspan a strong em label input select textarea img brなどがあります
二丶jQueryによるHTML要素の表示と非表示

$("p").hide();   //  
$("p").show();   //  
$("p").toggle(); //  (       ,        )

三丶v-show
Vueオブジェクトを作成してdataにshow:falseなどのパラメータを追加します.falseはtrueを隠すために表示するために黙認してtoshow()を呼び出すこの方法で要素を表示して隠す必要がありますまた、隠す必要がある要素にv-show命令を使用する必要があります

  
  


  

      /  
    
    
  


  var myapp=new Vue({
    el:'#app',
    data:{
      show: false,
    },
    methods:{
      toshow:function () {
        this.show = !this.show;
      }
    }
  });

四丶v-if作用判定固定的内容をロードするかどうか真であればロードします.そうでなければロードしません.権限管理ページで文法v-if=「判定式」(v-showと同じように使用)をロードします.特徴制御要素は非表示ではなく挿入または削除されます(v-showは非表示です).v-ifとv-showの違い:v-ifのセキュリティレベルが高いv-showページソースコードを非表示にしているだけで、セキュリティレベルが低いか、v-ifのスイッチング消費が高いかを見ることができます(スイッチング消費とは、ロードされていないか、ロードされていない状況を指し、この要素を追加または削除する必要があります)v-showは、より高い初期化レンダリング消費を必要とします
したがって、頻繁に切り替える必要があり、セキュリティにv-showを使用する必要がない場合、実行時の条件が変更できない場合はv-ifを使用する.
v-elseはv-ifの後にv-if条件が成立しないことを示すときに複数回の判断を実行するv-esle-ifを用いる.
例: