我这里总结了下实现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

Logo

前往低代码交流专区

更多推荐