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>