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

展示：

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

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

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

        <button v-for="(item,index) in arr" @click="changeTab(index)" :class="{active:clickIndex==index}">
            {{item.btn}}
        </button>
        
        //  v-show="clickIndex==index"  当v-show的值为true时，div显示，false时为假时，div隐藏。
        //  clickIndex的值在下面changeTab方法中获得值为当前的button下标，
        //  clickIndex==index button和div的下标对应   意思就是  当前的button    ====》   显示当前div
        <div v-for="(item,index) in arr" v-show="clickIndex==index">
            {{item.content}}
        </div>
    </div>

<script>
        const vm = new Vue({
            el: '#app',
            data: {
                arr: [{
                        btn: '栏目一',     //  按钮的文本内容
                        content: '内容一'   //  div的文本内容
                    },
                    {
                        btn: '栏目二',
                        content: '内容二'
                    },
                    {
                        btn: '栏目三',
                        content: '内容三'
                    }
                ],
                clickIndex: 0
            },
            methods: {
            //  为什么要传参？
            //  传的这个参数是当前点击button的下标index，因为按下按钮下面的div就显示第几个，
           //   所以要获取button的下标。将button的下标赋值给clickIndex 数据。
                changeTab(index) {
                    this.clickIndex = index
                    console.log(this.index)
                }
            }
        })
    </script>