vue2.0中，怎么在點擊一個按鈕的時候切換接口？

最外層組件AppFilm

<template>
   <div class="app-film">
        <AppFilmNav></AppFilmNav>
        <AppFilmBox :infor='url'  v-for="(url,i) in urls" :key='i'></AppFilmBox>
   </div>
</template>
<script>
import AppFilmNav from './AppFilmNav'
import AppFilmBox from './AppFilmBox'
import AppCom from './AppCom'
export default {
    name:'app-film',
    components:{AppFilmNav,AppFilmBox,AppCom},
        data(){
              return {
            urls:[                      
                {title:'正在熱映',url:'/mz/v4/api/film/now-playing?page=1&count=7'},
                {title:'即將上映',url:'/mz/v4/api/film/coming-soon?page=1&count=7'}
            ],
            
        }
    },
}
</script>
<style>
    .app-film{
        height: 0.5rem;
    }
</style>

次外層組件AppBox

<template>
   <div class="app-film-box">
       <AppFilmItem :film='film' v-for="film in films" :key="film.id"></AppFilmItem>
   </div>
</template>
<script>
import axios from 'axios'
import AppFilmItem from './AppFilmItem'
export default {
    props:['infor'],
    name:'app-film-box',
    components:{AppFilmItem},
        data:function(){
        return {
            films:[]
        }
    },
       methods:{
        getfilms(){
            let that = this;
            axios.get(that.infor.url).then(res=>{        
                console.log(res.data)    
                that.films = res.data.data.films   
            })
        }
    },
 created(){
        this.getfilms()
    }
}
</script>
<style>
    .app-film-box{
        padding:0 15px;
    }
</style>

里層組件appFilmItem

<template>
   <div class="app-film-item">
       <img  :src="film.poster.origin" alt="">
        <div class="info">
            <h5>{{film.name}}</h5>
            <p class="for">{{film.intro}}</p>
            <p class="for1">{{film.cinemaCount}}家影院上映<i>{{film.watchCount}}人購票</i></p>
        </div>
        <div class="other">
            <div class="range">8.5</div>
            <i class="fa fa-angle-right"></i>
        </div>
         
   </div>
</template>
<script>
export default {
    name:'app-film-item',
    props:['film'],
}

</script>
<style lang="scss">
body{
    background-color:#f9f9f9;
}
        .app-film-item{
            // padding-left: 20px;
            // margin-top: -0.3rem;
            display: flex;
            align-items: center;
            padding-bottom: 28px;
            border-bottom: 1px solid #ccc;
            padding-top: 25px;
            img{
                width:0.6rem;
            }
            .info{
                    padding-left: 15px;
                    display: inline-block;
                    width: 75%;
                    h5{
                            font-size: 16px;
                            line-height: 32px;
                            color: #000;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                    }
                    .for{
                            height: 24px;
                            line-height: 24px;
                            color: #8e8e8e;
                            font-size: 14px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            
                            width: 100%;
                            display: inline-block;
                    }
                    .for1{
                            line-height: 24px;
                            color: #8e8e8e;
                            font-size: 12px;
                            i{
                                margin-left: 15px;
                            }
                    }
                
            }
        }
    .other{
            display: flex;
            justify-content: space-between;
            margin-right: 0.2rem;
            margin-bottom:0.5rem;

          .range{
                font-size: 16px;
                line-height: 32px;
                color: #fc7103;
          }
          i{
                    padding-left: 5px;
                    line-height: 29px;
                    color: #c6c6c6;
          }
    }
</style>

還有一個導航組件appfilmNav

<template>
   <div class="app-film-nav">
         <div  class="now_playing">
             正在熱映
         </div>
        <div  class="coming_soon">
             即將上映
         </div>
   </div>
</template>
<script>
export default {
    name:'app-film-nav',
    data:function(){

    }
}
</script>
<style lang='scss' scoped>
        .app-film-nav{
            height: 47px;
            margin: 0.5rem 15px 5px 15px;
            border-bottom: solid #fe6e00 1px;
            
            // padding-left: 15px;
            // padding-right:15px;
            .now_playing{
                    color: #fe6e00;
                    border-bottom: solid;
                    float: left;
                    width: 50%;
                    height: 100%;
                    text-align: center;
                    font-size: 16px;
                    line-height: 46px;
                    // color: #6a6a6a;
                    cursor: pointer;
            }
            .coming_soon{
                    float: left;
                    width: 50%;
                    height: 100%;
                    text-align: center;
                    font-size: 16px;
                    line-height: 46px;
                    color: #6a6a6a;
                    cursor: pointer;
            }
}

</style>

想要實現(xiàn)的效果是：

當我點擊即將上映的時候可以切換第二個url請求地址，點擊正在上映的時候就切換第一個url請求地址？
怎么破解？如何不用router來達到這個效果？