<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h3>明星列表</h3>
<ul>
<li v-for="item in stars">
{{item}}
</li>
</ul>
<h3>學生列表</h3>
<ul>
<li v-for="item in students">
<h4>{{item.studentName}}</h4>
<p>年齡：{{item.age}}---學校：{{item.school}}</p>
</li>
</ul>
<h3>學生列表(帶索引值)</h3>
<ul>
<li v-for="item,key in students">
<h4>索引值：{{key}}--學生名字：{{item.studentName}}</h4>
<p>年齡：{{item.age}}---學校：{{item.school}}</p>
</li>
</ul>
<h3> 循環對象</h3>
<ul>
<li v-for="item,key in students[0]">
key:{{key}}---value:{{item}}
</li>
</ul>
<img :src="students[0].imgheader" />
<h3>條件+循環渲染（將偶數年齡的學生渲染出來）</h3>
<ol>
<li v-for="item,index in students" v-if="item.age%2==0" :key='index'>
<h4>索引值：{{index}}---{{item.studentName}}</h4>
<p>年齡：{{item.age}}---學校：{{item.school}}</p>
</li>
</ol>
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
stars:["aa","bb","cc","dd"],
students:[
{
studentName:"小明",
age:16,
school:"清華",
imgheader:"http://up.enterdesk.com/edpic/42/34/55/423455dcdd7aff829b38ae9e8e935656.jpg"
},
{
studentName:"小黑",
age:13,
school:"北大"
},
{
studentName:"小紅",
age:18,
school:"浙大"
},
{
studentName:"小黃",
age:12,
school:"武大"
},
{
studentName:"小白",
age:15,
school:"交大"
},
]
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>
<span>
<input type="text" v-model="fname">
<button @click="add">添加</button>
<button @click="del">刪除</button>
<button @click="change">替換</button>
</span>
</div>
<ul>
<li :key='index' v-for="(item,index) in list">{{item}}</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
fname:'',
list:['apple','orange','banana']
},
methods:{
add: function(){
this.list.push(this.fname)
},
del:function(){
this.list.pop();
},
change:function(){
this.list=this.list.slice(0,2);
}
}
})
</script>
</body>
</html>
