<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>循環</ TITLE>
</ head>の
<スタイル>
＃DIV2 {
表示：インラインブロック。
}
</スタイル>
<身体>
<のdivのid = "追加">
<DIV ID = "DIV1" V-用= "リストに点灯">
<P>父：{{lit.name}}年齢：{{lit.Age}}性別：{{lit.Sex}} </ P>
<= V-用DIV ID = "DIV2" "lit.childで（LT、IND）">
<P V-IF = "lit.child.length = 0！">儿子：{{}} lt.name年龄：（{{}} lt.Age岁）<スパンV-IF = "IND =点灯。 child.length-1" >和</ span>の
</ P>
</ div>
<時間>
</ div>
</ div>
</ BODY>
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ SCRIPT>
<スクリプト>
そこアドレス=新しいヴュー（{
エル：「#add」
データ：{
リスト：[{
名前：「周辺曇りティン」
年齢： '130'、
性別：「男性」
子： [{
名前：「スキン」、
年齢：3
}、{
名前：「小さな油」、
年齢：2
}]
}、{
名前：「海」、
年齢：24 ''、
性別：「男性」
子： [{
名前：「小さな海」
年齢：2
}]
}]
}、
}）
</ SCRIPT>
</ HTML>