v-for循环写tab组件小案例

展示：

v-for循环写tab组件小案例

简单的一个小案例，css文件这么easy就不贴了吧，也没啥样式。

	
	
	//  循环两次，一次是button，一次是内容框div。
	//  @click="changeTab(index)"   点击按钮触发changeTab事件，将当前被点击按钮的index（下标）传过去
	//  :   当clickIndex==index为true时，button的class有active这个属性

        
            {{item.btn}}
        
        
        //  v-show="clickIndex==index"  当v-show的值为true时，div显示，false时为假时，div隐藏。
        //  clickIndex的值在下面changeTab方法中获得值为当前的button下标，
        //  clickIndex==index button和div的下标对应   意思就是  当前的button    ====》   显示当前div
        
            {{item.content}}