兩種vue.js選項卡方法

方法一

<div id="app" class="box">
            <ul class="tabs clearfix">
                <li v-for="(tab,index) in tabsName">
                    <a href="#" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
                </li>
            </ul>
 
            <div class="cards">
                <div class="tab-card" style="display: block;">這里是HTML教程</div>
                <div class="tab-card">歡迎來到CSS模塊</div>
                <div class="tab-card">嗨，這里是Vue</div>
            </div>

var app = new Vue({
            el: "#app",
            data: {
                tabsName: [{
                    name: "HTML",
                    isActive: true
                }, {
                    name: "CSS",
                    isActive: false
                }, {
                    name: "Vue",
                    isActive: false
                }],
                active: false
            },
            methods: {
                tabsSwitch: function(tabIndex) {
 
                    var tabCardCollection = document.querySelectorAll(".tab-card"),
                        len = tabCardCollection.length;
 
                    for(var i = 0; i < len; i++) {
                        tabCardCollection[i].style.display = "none";
                        this.tabsName[i].isActive = false;
                    }
                    this.tabsName[tabIndex].isActive = true;
                    tabCardCollection[tabIndex].style.display = "block";
                }
            }
        })

 

方法二

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

var vm = new Vue({
    el: '#app',
    data: {
        tabs: ["標題一", "標題二","標題三"],
        tabContents: ["內容一", "內容二","內容三"],
        num: 1
    },
    methods: {
        tab(index) {
            this.num = index;
        }
    }
});

 

以上方法均為他人創作，如有冒犯，敬請原諒，可聯系本人刪除冒犯之處。