做前端的小伙伴应该都很清楚使用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>
Last modification:January 16, 2021
If you think my article is useful to you, please feel free to appreciate