VUE循环语句的使用(v-for)
对数组进行遍历
使用v-for进行遍历时注意参数格式,以“site in sites”的格式填入参数,sites是被遍历的数据,site是遍历出的值。
{{ site }}
<script>
export default {
name: 'app',
data(){
return {
sites:[2,2,5,7,4]
}
}
}
</script>
展现结果
遍历对象参数
v-for遍历对象的参数时,第一个参数是参数值。
{{ value }}
<script>
export default {
name: 'app',
data(){
return {
object: {
name: '李磊',
gen: '男',
achievement: 100
}
}
}
}
</script>
展现结果
第二个参数是参数的名称(键名),用“,”连接
{{key}}: {{ value }}
<script>
export default {
name: 'app',
data(){
return {
object: {
name: '李磊',
gen: '男',
achievement: 100
}
}
}
}
</script>
展现结果
第三个参数是索引
{{index }}. {{key}}: {{ value }}
<script>
export default {
name: 'app',
data(){
return {
object: {
name: '李磊',
gen: '男',
achievement: 100
}
}
}
}
</script>
展现结果
迭代整数
v-for 可以循环整数
{{ value }}
展现结果