<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換"コンテンツ= "IE =縁">
<タイトル>ドキュメント</タイトル>
<スタイル>
.btnAtive {
背景：赤。
色：#FFF;
}
.container {
幅：200pxの。
高さ：200pxの。
オーバーフロー：隠されました;
背景：#CCC;
}
.container > DIV {
幅：200pxの。
高さ：200pxの。
}
</スタイル>
</ HEAD>
<BODY>
<DIV ID = "アプリケーション">
<ボタンV- 用 "btnsで（項目、インデックス）" =
：クラス = "activeIndex ==インデックス'btnAtive'？ ''"
@click = "handleToggle（インデックス）"
> {{アイテム}} </ボタン>
<DIV CLASS = "コンテナ">
の<div V- 用 "（アイテム、インデックス）の内容に" V-ショー= = "activeIndex ==インデックス"> {{アイテム}} </ div>
</ div>
</ div>
</ body>
</ HTML>
<スクリプトSRC = "./ vue.js"> </ SCRIPT>
<SCRIPT>VaRの VM = 新しいヴュー（{
エル： "#app" 、
データ：{
btns：[ "ボタンA"、 "ボタン2"、 "ボタンを3" ]、
内容：[
"コンテンツA" 、
"内容" 、
"三の内容"
]、
activeIndex： 0
}、
メソッド：{
handleToggle （索引）{
この .activeIndex = 指数;
}
}
}）
</ SCRIPT>