使用vue实现tab操作

我这里总结了下实现tab功能的3个思路，仅供参考。

1. 切换content或者直接切换内容

这种思路下，我们首先把结构搭建起来，然后用一个变量selected表示tab当前展示的位置，给li标签添加mouseenter或click事件，将当前的index传递进去： html代码:

<div class="hd">
    <ul class="clearfix">
        <li v-for="(item, index) of list" :class="{active:selected==index}" @mouseenter="change(index)">{{item.title}}</li>
    </ul>
</div>
<div v-for="(item, index) of list" :class="{active:selected==index, item:true}" v-html="item.content"></div>

js代码:

var app = new Vue({
    el: '#app',
    data: {
        selected: 0, //当前位置
        list: [
            {
                title: '11111',
                content: '11111content'
            },
            {
                title: '22222',
                content: '222222content'
            },
            {
                title: '33333',
                content: `<div>
                                <span style="color:#f00">hello world</span>
                                <p><input type="text" v-model="message"></p>
                                <p>{{message}}</p>
                            </div>`
            }
        ]
    },
    methods: {
        change(index) {
            this.selected = index;
        }
    }
})

绑定的change(index)事件，每次都将index给了selected，然后tab就会切换到对应的标签。【查看实例1】https://www.xiabingbao.com/demo/vue-tab/demo1.html

上面的代码里，我们是通过切换div的显示与隐藏来进行执行的。tab中的content里如果只有纯html内容，我们可以直接把list[selected].content展示到.bd中：

<div class='bd' v-html="list[selected].content"></div>

每次selected变换时，bd的内容都会发生变化。

转载：https://www.xiabingbao.com/vue/2017/07/02/vue-tab.html