vue写一个通讯录页面

要求：通讯录用户以名字首字母开头进行分类，点击侧边栏首字母滚动到指定首字母开头的用户上

效果图

首先写侧边导航栏部分

template 部分

<div class="navList">
    <div class="navItem" v-for="(item,index) in navList" :key="index" @click="onClickTo(item)">{{item}}</div>
</div>

data 部分

navList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'], //侧边栏

methods 部分

// 点击跳转指定位置
        onClickTo(item){
            let to = 0
            for(let i in this.stuList){
                if(item == this.stuList[i].initialName){
                    to = 1
                }
            }
            
            if(to == 1){
                var PageId = document.querySelector('#' + item)
                //  滚动到指定位置 - 动画
                window.scrollTo({
                    'top': PageId.offsetTop,
                    'behavior': 'smooth'
                })
            }else{
                this.$toast({
                    message:'没有姓名首字母为' + item + '的学生哦',
                    duration:1000
                })
            }
            
        },

css部分(sass)

.navList{
        position: fixed;
        right: 0;
        top: 70px;
        width: 25px;
        background: #F6F8FA;
        padding-top: 20px;
        padding-bottom: 13px;
        .navItem{
            text-align: center;
            color: #ABB1B8;
            font-size: 15px;
            margin-bottom: 9px;
        }
    }

剩下的用户列表就不详细给了，只需要每个div的 id 动态绑定一下就行了