vue tab标签切换

页面tab切换 链接组件

import resour1 from '../components/Poster.vue' import resour2 from '../components/Video.vue' import resour3 from '../components/Product.vue' import resour4 from '../components/Display.vue'

注册组件

export default { data() { return { tabView: 'resour1', // 默认页面 tabs: [{'name':'海报'},{'name':'视频'},{'name':'产品图'},{'name':'陈列图片'}] } }, components: { Search, resour1, resour2, resour3, resour4 }, methods: { tabChange: function(tab){ this.tabView = tab } } }

循环切换标签

<div class="resorces-list" @click="tabChange('resour' + (index + 1))" v-for="(r, index) in tabs"> <span>{{ r.name }}</span> </div>

组件内容展示

<keep-alive> <component v-bind:is="tabView"></component> </keep-alive>