1 <！DOCTYPE HTML > 2 < HTML のlang = "EN" > 3 4 < ヘッド> 5 < メタのcharset = "UTF-8" > 6 < メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0 " > 7 < タイトル>ドキュメント</ タイトル> 8 <！ - 1导入ヴュー的包- > 9 < スクリプトSRC =" HTTPS：//cdn.jsdelivr。スクリプト> 10 </ ヘッド> 。11 12は < 身体> 13である < DIV ID = "アプリケーション" > 14 15 <！ - クリックして"切り替え" @ <INPUTタイプ= "ボタン"値= "トグル" => > - 16 < INPUT タイプの= "ボタン" 値= "トグル" @click = "！フラグ=旗" > 17 18は、 <！ - V-IFの特徴：毎回再作成または削除する要素を- > 19 <！ - V-ショーの機能を各執行のDOMの削除と再作成、単に表示要素を切り替えます：なしスタイル- > 20 21 <！ - ハンドオーバー性能の高い消費がある場合は、V- - > 22である <！ - V-ショーは高い初期消費でレンダリング- > 23である 24 <！ - 要素が頻繁な切り替えに来る場合は、Vを使用するのが最善ではありません-if、および推奨ショー-V - > 25 <！ - 要素が表示され、ユーザが見ることがない可能性がある場合は、それはIF-Vを使用することをお勧めします- > 26 < h3のV-IF = "旗"を>この要素は、V-IFによって制御されている</ H3 > 27 < H3 V-ショー"フラグに" = >この要素は、Vショーによって制御されている</ H3 > 28 </ DIV > 29 30 31である < スクリプト> 32 //Vueのインスタンスを作成し、ビューモデル与えるために 33である VAR VMが= 新しい新しいヴュー（{ 34は EL：' #app ' 、 35 データ：{ 36 フラグに：trueに 37 }、 38は {：方法 39 / * トグル（）{ 40 = this.flag！ this.flag 41である } * / 42である } 43れる ）}; 44れている </ スクリプト> 45 </ ボディ> 46である </ HTML >