vue循环-渲染列表

-------------------------html----------------------------------------

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

<div id="app">
<ul>
<li v-for="item in starts">
{{item}}
</li>
</ul>

<h3>僧尼列表</h3>
<ul>
<li v-for="item in students">
<h4>{{item.name}}</h4>
<p>年龄：{{item.age}}--------寺庙：{{item.simiao}}</p>
</li>
</ul>

<h3>僧尼列表带索引值</h3>
<ul>
<li v-for="item,key in students">
<h4>序号：{{key}}**{{item.name}}</h4>
</li>
</ul>

<h3>输出僧尼列表的第一个对象</h3>
<ul>
<li v-for="item in students[0]">
key:{{key}}@{{item}}
</li>
</ul>

<h3>输出僧尼年龄是偶数的</h3>
<ul>
<li v-for="item,index in students" v-if="item.age%2 ==0">
<h4>{{item.name}}</h4>
<p>年龄：{{item.age}}---------寺庙:{{item.simmiao}}</p>
</li>
</ul>
</div>

---------------------------------------js-------------------------------------

<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
starts:["成龙","范冰冰","艾萨克","犽樎","流窜风","墨菲特"],
students:[
{
name:'旦增楚布',
age:25,
simiao:"大昭寺"
},
{
name:'尕布',
age:20,
simiao:'小昭寺'
},
{
name:'约旦',
age:22,
simiao:'卧龙寺'
},
{
name:'扎西索朗',
age:29,
simiao:'楚蚌寺'
},
{
name:'尼玛罗布',
age:33,
simmiao:'哲蚌寺'
}
]
}
})
</script>