1.v-for
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果：
<body>
<div id="app">
<ul>
<li v-for ="item in start">{{item}}</li>
</ul>
<h3>学生列表</h3>
<ul>
<li v-for = "item in student">
<h4>{{item.name1}}</h4>
<p>年龄：{{item.age}}---学校：{{item.school}}</p>
</li>
</ul>
<h3>学生列表(带索引值)</h3>
<ul>
<li v-for = "item,key in student">
<h4>索引值：{{key+1}}---{{item.name1}}</h4>
<p>年龄：{{item.age}}---学校：{{item.school}}</p>
</li>
</ul>
<h3>循环对象</h3>
<ul>
<li v-for = "item,key in student[0]">key:{{key}}----value:{{item}}</li>
</ul>
<img :src="student[0].img" >
<!-- 只显示年龄为偶数的学生 -->
<h3>只显示年龄为偶数的学生</h3>
<ol>
<li v-for="item,index in student" v-if = "item.age%2 ===0">
<h4>索引值：{{index}}---{{item.name1}}</h4>
<p>年龄：{{item.age}}---学校：{{item.school}}</p>
</li>
</ol>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
start:['周杰伦','张杰',"何炅","邓超"],
student:[{
name1:"小米",
age:16,
school:"清华",
img:""
},
{
name1:"小红",
age:21,
school:"北大",
},{
name1:"小刚",
age:18,
school:"金陵",
},]
},
mounted() {
},
methods: {
},
})
</script>
</body>
