1.v-for循环数组
<template>
<div>
<ul>
<li v-for="item in list" :key="item">//遍历list，每个item生成一个li元素，key作为唯一标识符，加上key的好处是如果list中的数据变化时在渲染的时候只需要改变变化的dom，不然就需要全部list生成的dom都要重新渲染
{{item}}
</li>
<li v-for="(item,index) in list" :key="item">//(item,index)，item为list中元素的值，index为下标
{{item}}-{{index}}
</li>
</ul>
</div>
</template>
<script>
export default {
name:"App",
data:function(){
return {
list:['a','b','c']
};
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
2.v-for循环对象
<template>
<div>
<ul>
<li v-for="(item) in student" :key="item">//遍历student对象中每个属性的值
{{item}}
</li>
<li v-for="(item,key,index) in student" :key="item">//key为每个属性的名称，index为属性的序号
{{index}}.{{key}}:{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
name:"App",
data:function(){
return {
student:{
name:'halo',
age:20,
sex:'male'
}
};
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
3.遍历的每个item可以作为参数传入到元素的事件方法中
<template>
<div>
<ul>
<li v-for="(item) in student" :key="item" @click="click(item)">//将item作为click方法的参数传入定义的方法内执行
{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
name:"App",
data:function(){
return {
student:{
name:'halo',
age:20,
sex:'male'
}
};
},
computed:{
},
methods:{
click:function(data){
console.log(data);
}
}
}
</script>
<style scoped>
</style>