#vue# v-for渲染出导航栏

需求：制作一个导航栏

效果：

点击前：

点击后：

后端接口

 思路：

在实际的开发里，一般不会写死导航栏的内容，然后为了更加动态以及高效修改导航栏的情况下，我们最好是用v-for进行渲染出来

（1）可以使用ul标签来写，通过flex进行布局（少用浮动，不要定宽度）然后在li 处，通过v-for进行循环渲染出来

（2）然后就要进行写点击事件了，从效果图以及后端返回的接口处，我们可以得知，我们需要点击时获取的内容是——导航名字以及状态（status），只要让点击时的status（其实就是点击时拿到的ID）与我们后端接口文档里面的status相对应的话，就可以拿到每一个状态里面，相对应的数据结果了

温馨提示：：key必须要加，确保唯一性

（3）然后再进行接入数据，即可渲染出数据

代码部分

<template>
    <ul class="live-nav">
           <li class="live-nav-item" 
                v-for="item in liveStatus" //item的意思是代表当前的那一条数据
                :key="item.status" //绑定关键ID
                @click="changeStatus(item.status)" >{{item.name}}</li>
                //设置点击事件，里面传入接口数据里面的status
    </ul>

</template>


<script>
   data () {
       return {
          liveStatus:[
             {name:'全部直播',status:0}, 
             {name:'未开始',status:1},
             {name:'直播中',status:2},
             {name:'已结束',status:3}],
             //写好一个数组，设置名字以及状态（与点击时获取到的接口数据里的status相一致）
            liveList:[], 
        }
    },
    methods:{
        getList() {   //这个是接数据
            liveList({
                status:this.status,
            }).then(res => {
                this.liveList = res.data.list
            })
        },
        changeStatus(status){
            this.status = status // 点击时，让我们自己设置的状态status与数据接口里的一致，
                                    然后获取到状态以后，
                                    再向服务器请求数据，所以就执行下面的函数方法
            this.getList() 
        },


</script>


<style>

    .live-nav {
    display: flex;
    height: 32px;
    margin-bottom: 30px;
}

.live-nav-item {
    height: 32px;
    color: #333333;
    text-align: center;
    margin-right: .4rem;
    margin-bottom: .36rem;
    font-size: .16rem;
    font-family: SourceHanSansSC-Normal, SourceHanSansSC;
    font-weight: 400;
}
.live-nav-item:hover {
    font-size: .18rem;
    @extend .edu-active-color;
    border-bottom: 3px solid;
    @extend .edu-active-border-color;
    cursor: pointer;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: 600;
}

</style>