Vue列表渲染循环对象

作者: 云凡的云凡 | 来源:发表于2020-10-09 00:12 被阅读0次

image.png

上代码
遍历对象时，直接动态的往对象加值是不好用的，可以直接改引用。

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10列表渲染循环对象</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- item 对象的每一项，key 每一项的键名， index 每一项的位置 -->
        <div v-for="(item,key,index) of userInfo">
            {{item}}----{{key}}------{{index}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                userInfo: {
                    name: 'yunfan',
                    age: '22',
                    hobby: 'writer',
                    from: 'nongcun'
                }
            }
        })
    </script>
</body>

</html>