-------------------------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>