做前端的小伙伴应该都很清楚使用vue的v-for就可以很方便的一个数组,然后对数组中的元素就行展示或者操作,那么有没有考虑过遍历对象呢。我们在学习js的时候都应该知道,我们使用js是可以遍历对象的,比如:
var oj = {"a":1, "b": 2, "c": 3}
for(var i in oj){
console.log(i,"----->" ,oj[i])
}
// 输出
// a -----> 1
// b -----> 2
// c -----> 3
其实使用vue的v-for的效果是一样的,也是用的in。下面案例的输出结果是一样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-for="(val, key, index) in list">{{key}}----->{{val}}</p>
</div>
<script>
var obj=
new Vue({
el: '#app',
data:{
list:{
'a':1,
'b':2,
'c':3
}
}
})
</script>
</body>
</html>