vue中tab切换前端实现_vue如何实现这样的tab切换

看写我这个demo

音乐

下载APP

推荐

排行榜

搜索

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)

}

})

}

}

}