v-for循环

v-for="x in 请求数据所在的数组"

x为声明的变量名,存储请求数据的元素

x相当于data.data 
获取某个值时用x.name相当于data.data.name

 

 

 

 

 

 

 

 

 

 

 

解构name,同时使用序号时可以不加(小括号)同上

 

 解构name,同时使用序号时可以加(小括号)同上

 

 

 

为了避免出现错误建议使用(小括号)

 

 

 

 

 

<template>
    <div class="d-y">
        <div id="nav" v-if="data">
            <span v-for="{name},index in data.data" :key="index" @click="now=index;getRoom()"
                :class="{active:now==index}">{{name}}</span>
            <!-- <span> now:{{now}}</span> -->
        </div>
        <div id="room" v-if="roomData">
            <div v-for="({hn,nickname,roomName},index) in roomData.data.list" :key="index">
                <div>
                    <img src="" />
                    <span>{{nickname}}</span>
                    <span>{{hn}}</span>
                </div>
                <span>{{roomName}}</span>
            </div>

        </div>
    </div>
    </div>

</template>

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                data: '',
                now: 0,
                roomData: ''
            }
        },

        methods: {
            getNavURL() {
                var url = '请求地址';
                axios.get(url).then(res => {
                    console.log(res);
                    this.data = res.data;
                    // this.getRoom(0);
                });
                // console.log(now);
            },
            getRoom() {
                var url = `请求地址`;
                axios.get(url).then(res => {
                    console.log(res);
                    this.roomData = res.data;
                })
            }
        },
        mounted() {
            this.getNavURL();
        }
    }
</script>

<style lang="scss" scoped>
    #nav {
        display: flex;
        padding: 20px;
        background-color: #aaa;

        >span {
            padding: 8px;
            color: white;
            font-size: 28px;
            margin-left: 20px;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;

            &.active {
                color: orange;
                font-weight: bolder;
                border-bottom: 3px solid orange;
            }
        }
    }
</style>