代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<template v-for="book in books">
<div>类型:{{book.name}}</div>
<template v-for="b in book.content">
<div>书名:{{b.name}} 作者:{{b.author}}</div>
</template>
</template>
</div>
<script>
var v = new Vue({
el : "#app",
data : {
books : [
{
name : '文学' ,
content : [
{
name : '红楼梦',
author : '曹雪芹'
},
{
name : '三国演义',
author : '罗贯中'
},
{
name : '饮水词',
author : '纳兰性德'
}
]
},
{
name : '艺术' ,
content : [
{
name : '唐宋诗词格律',
author : '王力'
},
{
name : '现代诗歌理论与技巧',
author : '谭德晶'
}
]
},
{
name : '哲学' ,
content : [
{
name : '道德经',
author : '老子'
},
{
name : '理想国',
author : '柏拉图'
}
]
}
]
},
methods : {
}
});
</script>
</body>
运行效果：
