image.png

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何使用for循环和if语句处理对象中嵌套对象</title>
    <script src="//static.gzj2001.com/vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(v,k,i) in obj1">
                <p v-if="typeof v !='object'">{{v}}</p>
                <p v-else>{{k}}</p>
                <ul v-if="typeof v=='object'">
                    <li v-for="(v1,k1,i1) in v">{{v1}}</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                obj1:{
                    id:1,
                    name:"allen",
                    city:"hk",
                    info:{username:"admin",password:"null"}
                }
            }
        })
    </script>
</body>
</html>

效果

image.png