<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スクリプトSRC = "https://cdn.bootcss.com/vue/2.6.10/vue.js"> </ SCRIPT>
<リンクのhref = "https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" のrel = "スタイルシート">
<リンクのhref = "https://cdn.bootcss.com/animate.css/3.7.1/animate.css" のrel = "スタイルシート">
<スタイル>
{.div1
幅：200pxの;高さ：200pxの;背景：赤
}
.move、入力{
パディング左：100ピクセル
}
.move入力し、アクティブ{
トランジション：すべての2S
}
入力し.move-に{
パディング左：0PX
}
.move脱退{
パディング左：0PX
}
.move脱退活性{
トランジション：すべての2S
}
{.move脱退対
パディング左：100ピクセル
}
</スタイル>
</ head>の
<身体>
<DIV ID = "アプリ">
<input type = "ボタン" 名前= "" @クリック= '変更' の値= "按钮">
<遷移名=「移動」モード=「」>
<DIV V-IF = 'フラグ'：キー= 1>表示</ div>
<DIV V-ELSE：キー= 2>非表示</ div>
</遷移>
</ div>
<スクリプト>
{（VM =新しいVueのでした
「#app」
データ：{
フラグ：真
}、
方法：{
変化する（） {
this.flag =！this.flag
}
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>