Vue_v-IF＆V-ショー

1.基本的な使用

名前が示すように、V-場合、条件が決定されます。得られた結果が真である場合、要素がレンダリングされる場所。

構文：

V- IF = " ブール式"

例：

<DIV ID = " アプリ" > 
    <ボタンVオン：クリック= " ！ショー=ショー" >点我呀</ button>の
    <BR> 
    <H1 V- 場合 = " ショー" > 
        ？！看到我啦
     < / H1> 
    <H1 V-ショー= " ショー" > 
        看到我啦？！示し
     </ H1> 
</ div> 
<スクリプトSRC = " ./node_modules/vue/dist/vue.js " > </ SCRIPT> 
<スクリプトタイプ= " テキスト/ javascriptの" >
    したアプリ= 新しいヴュー（{ 
        ：エル" #app " 、
        データ：{ 
            ショー：真
        } 
    }）
 </スクリプト>

V-のため2.連動

V-IFとするとき、V-用発生一緒に、V-に対してより高い優先順位。言い換えれば、我々は最初のトラバーサル、その後、条件を判断します。

ケースV-用のv-場合は追加の修正：

<UL> 
    <LIのV- ため = " ユーザーが（ユーザー、インデックス）" V- なら = " user.gender == '女' " > 
        {{インデックス + 1 }}。{{user.name}} - {{user.gender}} - {{user.age}}
     </ LI> 
</ UL>

効果：

唯一の女性ユーザー情報を表示します

3.v、他

あなたは使用することができますv-else表すためにコマンドをv-if「elseブロックを」：

<divの上記のid以上= " アプリケーション" > 
    <h1とV- IF = " Math.random（）> 0.5 " > 
        今、私を参照してくださいするには？！IF 
    </ H1> 
    <H1 V- 他 > 
        今、私を参照してください？！他の 
    </ H1の> 
</ div>

v-else要素は、すぐにとしなければならないv-ifかv-else-ifの要素の後ろに、それ以外の場合は認識されません。

v-else-if、名前が意味する、として機能v-if「他-場合ブロック」連続して使用することができます。

<DIV ID = " アプリケーション" > 
    <ON-Vボタン：クリック= " ランダム= Math.random（）" >ポイントI型</ button>の<span>をランダム{} {} </ span>の
    V-の<H1 IF = " ランダム> = 0.75 " > 
        今、私を参照してください？！IF 
    </ H1> 
    <H1 V- 他 - IF = " ランダム> 0.5 " > 
        今、私を参照してくださいするには？！IF  0.5 
    </ H1の> 
    <V- H1の他に - IF = " ランダム> 0.25 " > 
        今の私を参照してください？！IF  0.25
    </ H1> 
    <H1 V- 他 > 
        看到我啦？！他 
    </ H1> 
</ div> 
<スクリプトSRC = " ./node_modules/vue/dist/vue.js " > </ SCRIPT> 
<スクリプトタイプ= " テキスト/ javascriptの" >
     VARのアプリ= 新しいヴュー（{ 
        EL：" #app " 、
        データ：{ 
            ランダム：1 
        } 
    }）
 </スクリプト>

同様にv-else、v-else-if我々はすぐに持参しなければならないv-ifかv-else-ifの要素の後に。

デモ：

4.vショー

その状態に応じて表示素子のための別のオプションv-show命令。使用法とほぼ同じ。

<H1 V-ショー= " OK " >こんにちは！</ H1>

違いがでていることであるv-show要素にレンダリングされるように、常にDOMに残ります。v-show単純に要素のCSSプロパティを切り替えますdisplay。

例：

<DIV ID = " アプリケーション" > 
    < - - JSイベントフラグメントの書き込み直接！> 
    <ON-Vボタン：クリック= " ！ショー=ショー" > </ button>のAスイッチをクリックして
    V-の<H1 IF = " ショー" > 
        こんにちは
     </ H1>の
</ div> 
<SCRIPT SRC = " ./node_modules/vue/dist/vue.js " > </ SCRIPT> 
<スクリプトタイプ= " テキスト/ JavaScriptを" >
     VARのApp = 新しい新しいヴュー（{ 
        EL：" #app " 、
        データ：{ 
            ショー：真
        } 
    }）
 </スクリプト>

コード：

1.基本的な使用

V-のため2.連動

3.v、他

4.vショー

おすすめ