vue.jsに会う-------- Awenのvue.js研究ノート（7）-----条件付きレンダリング

**
新しい学習と新しい旅、vue.jsを一緒に学習する新しい長い行進に乗り出しましょう

…………

vue.jsに会う-------- Awenのvue.js研究ノート（ディレクトリ）

私に注意を払ってください、私たちは一緒に学び、進歩します。

****

1、v-if

意味：この v-if命令は、コンテンツの一部を条件付きでレンダリングするために使用されます。このコンテンツは、命令の表現が真の場合にのみレンダリングされます。falseの場合、レンダリングされません

例えば：
ここに写真の説明を挿入

2、v-else

意味：およびv-組み合わせて使用する場合は、v-if他のブロックを表します

つまり、v-ifの条件が確立されていない場合（つまり、v-ifのスタイルがレンダリングされない場合）、v-elseのスタイルがレンダリングされます。

簡単な例：
ここに写真の説明を挿入

3、v-else-if

意味：それはとして機能するように、何かの新しいVUE 2.1.0バージョンで連続して使用することができます。v-ifelse-if 块

簡単な例：
ここに写真の説明を挿入

以前にjsで学んだif判断ステートメントとして簡単に理解できます

4、テンプレート

v-if条件付き判断を行うためのボックスが多数ある場合、v-ifを使用する場合は、すべてのボックスを書き込む必要があり、非常に面倒なので、すべてのニーズにvを使用できます。 -ジャッジメントボックスが<template> </template>内部に配置され、vを使用する場合-テンプレートに記述されている場合、ジャッジできる

簡単な例：
ここに写真の説明を挿入

5、キー

私たちのビューは、要素を可能な限り効率的にレンダリングし、通常、最初からレンダリングするのではなく、既存の要素を再利用します。

例えば：

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="a">
			<template v-if="jiedian==='zhanghao'">
				<lable>账号</lable>
				<input type="text" placeholder="please enter zhanghao">
			</template>			
			<template v-else>
				<lable>密码</lable>
				<input type="text" placeholder="please enter password">
			</template>
			
			<input type="button" value="点击切换" v-on:click="dianji"> 
		</div>
		
		<script>
			var vm = new Vue({
    
    
				el:"#a",
				data:{
    
    
					jiedian: 'password'
				},
				methods:{
    
    
					dianji:function(){
    
    
						if(this.jiedian == 'zhanghao'){
    
    
							this.jiedian="password"
						}else{
    
    
							this.jiedian="zhanghao"
						}
					}
				}
			})
		</script>
	</body>
</html>

実行結果：この例で切り替えると、以下の入力ノードが再レンダリングされないことがわかります。これは、内部のプレースホルダーのコンテンツを変更するだけです。
ここに写真の説明を挿入
したがって、入力ボックスにコンテンツがある場合は、切り替えをクリックした後、入力ボックスの内容は消えませんが、

この状況ではニーズを満たさない場合があるため、2つの要素を分離して、デフォルトの「再利用」属性をキャンセルする必要があります。

次に、結果keyに対して開いている2つの独立したプロパティにプロパティを直接追加し
ここに写真の説明を挿入
ます。今すぐ見つけることができますが、再利用は再レンダリングされません。

補足::
placeholderプレースホルダーを追加するために使用されます。

6、v-show

v-show v-ifの役割と同様に、条件に従ってレンダリング結果を表示するかどうかを選択します。

簡単な例：条件が真であるため表示され、条件が偽の場合は表示されません
ここに写真の説明を挿入

注：
私たちのv-showは、最初から最後までyuan'suをdomに変換しますが、trueとfalseの条件に基づいて表示するかどうかが判断されます。（v-show要素のCSSプロパティで表示を切り替えるだけです）

7.v-showとv-ifを比較します

（1）これv-ifは「実際の」条件付きレンダリングです。これは、条件付きブロック内のイベントリスナーとサブコンポーネントが、切り替えプロセス中に適切に破棄および再構築されることを保証するためです。（条件の真偽に従ってレンダリングされるか、レンダリングされないか、条件が偽の場合はレンダリングされた要素が破棄されます）

（2）v-if怠惰です：最初のレンダリングで条件が偽の場合、何も行われません。、条件付きブロックは、条件が初めて真になるまでレンダリングを開始しません。

（3）対照的に、v-showそれははるかに単純です-初期条件が何であれ、要素は常に最初にレンダリングされ、条件が真か偽かに基づいて、CSSに基づいて表示するかどうかを切り替えるだけです。

（4）一般にv-if、スイッチングオーバーヘッドv-showが高く、レンダリングの初期コストが高くなります。したがって、非常に頻繁に切り替える必要がある場合は、がv-show好ましく使用されます。実行時にほとんど変更されない場合（頻繁に切り替えない）は、v-if好ましくは使用されます。

8.v-ifとv-forを同時に使用します

場合v-ifやv-for、一緒に使用した場合v-forよりもv-if高い優先順位。これは、v-ifが各v-forループに繰り返し適用されることを意味します。この優先メカニズムは、特定のノードに属性を追加する必要がある場合に非常に役立ちます

簡単な例：彼が1つをトラバースしてから、v-if判定を実行することがわかります。そのため、一致しない最後の条件はレンダリングされません。falseの
ここに写真の説明を挿入
場合はレンダリングされるため、「Ilovegames」のみがレンダリングされます。

ここに写真の説明を挿入
もちろん、v-forの優先度はv-ifよりも大きいため、リスト全体がレンダリングされないようにする場合は、リストliの親タグにv-ifを追加できます。

簡単な例：
ここに写真の説明を挿入

**
キャンパスの公式アカウントをフォローし、ウェブフロントエンドに返信して無料の50Gフロントエンド学習資料を受け取り、一緒に学び、進歩しましょう。
ここに写真の説明を挿入
**
Shen Congwenはかつて言った：「あなたが戻ってきたことを知っているので、待つ」