【Vue】Tab面板

微信订阅号：Rabbit_svip

微信订阅号：Rabbit_svip

HTML代码

<section id="tab">    <input type="button" v-for='i in inputValue' v-bind:value="i" v-bind:class='$index==index? "active" : ""' @click='change($index)'>

    <div v-for='i in divInner' v-show='$index==index ? true : false'>
        {{i}}    </div></section>

JS代码

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自行下载导入。

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

js的代码

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

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

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

HTML代码

点击标题（button按钮）

<input type="button" v-for='i in inputValue' v-bind:value="i" v-bind:class='$index==index? "active" : ""' @click='change($index)'>

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)'

内容的切换（div的切换）

<div v-for='i in divInner' v-show='$index==index ? true : false'>
    {{i}}</div>

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

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

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