vue标签切换

Vue.js选项卡组件实现

最新推荐文章于 2024-05-28 04:00:44 发布

转载最新推荐文章于 2024-05-28 04:00:44 发布 · 950 阅读

Vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单选项卡组件案例。该组件通过v-for指令遍历标题和内容数组来生成选项卡界面，并利用Vue的数据绑定特性实现了选项卡切换的功能。文章展示了如何使用Vue的自定义事件和数据属性来控制当前活动选项卡。

<!--这里是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>