如何用vue v-for完美渲染在<li><ul></ul></li>

Question

http://en.jsrun.net/miiKp/edit
以上是demo.
我把html写死了
但用vue怎么无法像html那样的效果呢？
这种html 至少有五十多个，怕以后修改更改只能想到用vue。

求vue大牛帮我写个例子，而且我下午研究了一下无法像html css那样hover展示二级菜单效果。
在不修改的html结构下如何完美的把vue数据渲染在html啊。
用v-for嵌套v-for试过了。
li结构有点复杂
第一个和最后一个是一维数据
第二个是关于我们，但关于我们下面有二维数据需要hover展示。

  new Vue({
            el: '.page',
            data: {
                nav:[{
                    "name": "首页",
                    "url": "index.html"

                },{
                    "name": "关于我们",
                    "url": "index.html",
                    "members":[{"name": "项目简介", "url": "about.html"},
                        {"name": "师资团队", "url": "about.html"},
                        {"name": "联系我们", "url": "about.html"},
                        {"name": "使用手册", "url": "about.html"}]
                },{
                    "name": "课程中心",
                    "url": "index.html",
                    "members":[{"name": "项目简介", "url": "about.html"},
                        {"name": "师资团队", "url": "about.html"},
                        {"name": "联系我们", "url": "about.html"},
                        {"name": "使用手册", "url": "about.html"}]
                },{
                    "name": "教材读本",
                    "url": "index.html",
                    "members":[{"name": "项目简介", "url": "about.html"},
                        {"name": "师资团队", "url": "about.html"},
                        {"name": "联系我们", "url": "about.html"},
                        {"name": "使用手册", "url": "about.html"}]
                },
                ]
            }


        })

Answer 1

<ul>
    <li v-for="(item,index) in nav">
        <a :href="item.url">{{item.name}}</a>
        <ul v-if="item.members">
            <li v-for="value in item.members">
                <a :href="value.url">{{value.name}}</a>
            </li>
        </ul>
    </li>
</ul>