vue之tab切换

<template>
	<div>
		<el-tag  v-for="(item,index) in tabsParam"  @click="toggleTabs(index)" :class="{active:index===nowIndex}" type="success">{{item}}
		</el-tag>
		<!--切换项组件-->
		<addBook v-show="nowIndex===0"></addBook>
		<editBook v-show="nowIndex===1"></editBook>
	</div>
</template>

<script>
//在同一文件夹中
	import addBook from './AddBook.vue';
    import editBook from './EditBook.vue';
     export default {
        name: 'newCreate',
        components:{
            addBook,editBook
        },
        data() {
            return{
                tabsParam:['新增','编辑'],
                nowIndex:0,

                }
        },
        methods:{
            //切换tab项
             toggleTabs(index){
                 this.nowIndex = index;
                 $(window).resize();
            },
            }
}
</script>

<style>
//标签之间的距离
	 .el-tag + .el-tag {
    margin-left: 10px;
  }
</style>

图片实例

有点丑，将就看看，不接受批评