vue.js 实现的tab切换功能

最新推荐文章于 2024-07-17 11:58:23 发布

dq_095

最新推荐文章于 2024-07-17 11:58:23 发布

阅读量1.9k

点赞数

分类专栏： Vue.js 文章标签： vue实现tab的切换功能

本文链接：https://blog.csdn.net/qq_37968920/article/details/81603320

版权

Vue.js 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

实现原理：点击tab @click事件，替换index = num索引,tabContent内容部分 v-show:展示与隐藏：index与 num

<!--这里是html结构-->
<div id="app">
    <ul>
        <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
    </ul>
    <div class="tabCon">
        <div  v-for='(itemCon,index) in tabContents' v-show=" index == num">{{itemCon}}</div>
    </div>
</div>

<!--这里是js代码-->
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        tabs: ["标题一", "标题二","标题三"],
        tabContents: ["内容一", "内容二","内容三"],
        num: 1
    },
    methods: {
        tab(index) {
            this.num = index;
        }
    }
});
</script>