1:小泽理解的想法是:首先设置两个组件 SearchSongs与SearchSongLists,然后再data中定义两个变量,一个toggle
一个currentView(表示当前组件)
<template>
<div class="search">
<nav class="searchList-nav" ref="change">
<span :class="{isActive: toggle==='Songs'}" @click="handleChangeView('Songs')">歌曲</span>
<span :class="{isActive: toggle==='SongLists'}" @click="handleChangeView('SongLists')">歌单</span>
</nav>
<component :is="currentView"></component>
</div>
</template>
<script>
import SearchSongs from '../components/search/SearchSongs';
import SearchSongLists from '../components/search/SearchSongLists'
export default {
name: 'Search',
components: {SearchSongs,SearchSongLists},
data(){
return {
toggle: 'Songs',
currentView: 'SearchSongs'
}
},
methods:{
//切换组件
handleChangeView(component){
this.currentView = 'Search'+component;
this.toggle = component;
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/css/search.scss';
</style>