1 回答

TA貢獻1821條經驗 獲得超6個贊
看寫我這個demo
<template>
<div>
<!--<img src="./assets/logo.png">-->
<header class="mod_header">
<i class="music_logo">音樂</i>
<a href="javascript:;" class="btn_download">下載APP</a>
</header>
<nav class="mod_nav" @click="goView">
<a href="javascript:;" data-nav="Recom" data-index="0" :class="{current:isActive[0]}">推薦</a>
<a href="javascript:;" data-nav="TopList" data-index="1" :class="{current:isActive[1]}">排行榜</a>
<a href="javascript:;" data-nav="Search" data-index="2" :class="{current:isActive[2]}">搜索</a>
<!--<a v-link="/HelloWorld">HelloWorld</a>-->
</nav>
<!-- 動態組件 -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
</div>
</template>
<script>
import Recom from '@/components/Recom'
import TopList from '@/components/TopList'
import Search from '@/components/Search'
export default {
name: 'app',
data () {
return {
view: 'Recom',
isActive: [true, false, false]
}
},
components: {
Recom,
TopList,
Search
},
methods: {
goView (el) {
let me = this
me.view = el.target.attributes['data-nav'].nodeValue
let dataIndex = el.target.attributes['data-index'].nodeValue
// eslint-disable-next-line 這個注釋的是說明下面這行代碼不用es6檢查
me.isActive.find((h, i) => {
// eslint-disable-next-line
if (i == dataIndex) {
me.$set(this.isActive, i, true)
} else {
me.$set(this.isActive, i, false)
}
})
}
}
}
</script>
添加回答
舉報