Vue の条件付きレンダリング v-if および v-show

v-if /v-else または v-show 

属性値は true と false で、使用される変数は表示する場合は true、非表示にする場合は false です。

<div id="app">
			<button @click="change1">开关</button>
			<div v-if="flag">我是v-if</div>
			<div v-show="flag">我是v-show</div>
	
		</div>

new Vue({
				el:"#app",
				data:{
					n2:true,
					flag:true
				},
				methods:{
					change1(){
						this.flag=!this.flag
					}
				}
			})

インターフェース表示

 スイッチをクリックすると両方とも消えます

2つの違い

先ほどのコードの例:

 

ボタンをクリックした後に表示される元のコードから、 v-if が要素に直接アノテーションを付けている (ノードを削除している) ことがわかります。

  v-show は要素 display:none を設定します。

// v-if はスイッチング消費量が多く、ユーザーが頻繁に切り替えないモジュールでよく使用されます
// v-show はパフォーマンス消費量が多く、頻繁に切り替えられるモジュールでよく使用されます