Tab面板

微信订阅号：Rabbit_svip

微信订阅号：Rabbit_svip

    

    
        {{i}}    

new Vue({    el: '#tab',
    data: {
        index: 0,
        inputValue: ['aaa', 'bbb', 'ccc'],
        divInner: ['我是aaa','我是bbb','我是ccc']
    },    methods: {        change: function(myIndex) {
            this.index = myIndex;
        }
    }
});

CSS样式自己随便写。

Vue.js自行下载导入。

通过data，创建Tab标题数据（inputValue）和内容数据（divInner），真实开发的时候可以通过json等方式来接收后台数据。

data里面有一个index，通过index可以确定当前点击的是哪个tab标题，也就是用来检测点击了button了。然后通过 change() 这个方法来修改index值。从而决定了哪个div该显示，哪个div该隐藏。

默认index为0，设置默认被选中了第一个button，所以默认显示第一个的内容。

v-for='i in inputValue'

循环输出多个button

v-bind:value="i"

可以简写为      :value="i"
通过 i 这个索引值，给button绑定不同的value。
可以理解为 value="inputValue[i]"

v-bind:class='$index==index? "active" : ""'

这里设置了button的class，如果仔细看，可以看到被点击的button字体会变粗。
这里通过三目运算符，判断当前button是否被选中了，如果选中了，$index就会等于index，这时当前button的class就是active，否则就为空。

@click='change($index)'

最后给button绑定一个change事件。
@click是简写，
非简写的形式为    v-on:click='change($index)'

    {{i}}

通过v-for循环输出相应个数的标签，并通过{{ i }}这种方法给对应输出内容。

通过$index==index的方法，判定哪个标签应该显示，哪个div标签应该隐藏。

作者：滑滑兔
链接：https://www.jianshu.com/p/551f65c44342