VueJs 中的 Tab 功能

Created: November-22, 2018
<!doctype html>

<html>

<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <script src="vue.js"></script>
    <style>
        * {
            font-family: sans-serif;
        }

        #app {
            margin: 0 auto;
            width: 500px;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul li {
            display: inline-block;
            padding: 10px 20px;
            border: 1px solid #000;
            margin-left: 10px;
            border: 1px solid #000;
        }

        ul li.active {
            display: inline-block;
            padding: 10px 20px;
            background: #94d464;
        }
        .tab-title li {cursor: pointer; border-bottom: none;}

    </style>
</head>

<body>
    <div id="app">
        <h2 v-bind:title="h1">{{h1}}</h2>
        <div id="tab">
            <ul class="tab-title">
                <li v-for="(title, index) in tab" @click="activeTab(index)" :class="{active: (index == activeTabIndex)}">{{title.title}}</li>
            </ul>
            <ul>
                <li v-for="(title,index) in tab" v-if="index == activeTabIndex">{{title.content}}</li>
            </ul>
        </div>
    </div>
</body>
<script>
    var data = {
        h1: "Tab system",
        activeTabIndex: 0,
        tab: [{
            title: "one",
            content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aut provident cum rerum! Vero nemo error nesciunt sunt illo ea iste porro pariatur necessitatibus! Quidem unde voluptatem animi cum, adipisci.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aut provident cum rerum! Vero nemo error nesciunt sunt illo ea iste porro pariatur necessitatibus! Quidem unde voluptatem animi cum, adipisci."
        }, {
            title: "two",
            content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aut provident cum rerum! Vero nemo error nesciunt sunt illo ea iste porro pariatur necessitatibus! Quidem unde voluptatem animi cum, adipisci."
        }, {
            title: "three",
            content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aut provident cum rerum! Vero nemo error nesciunt sunt illo ea iste porro pariatur necessitatibus! Quidem unde voluptatem animi cum, adipisci.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aut provident cum rerum! Vero nemo error nesciunt sunt illo ea iste porro pariatur necessitatibus! Quidem unde voluptatem animi cum, adipisci.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aut provident cum rerum! Vero nemo error nesciunt sunt illo ea iste porro pariatur necessitatibus! Quidem unde voluptatem animi cum, adipisci."
        }, {
            title: "four",
            content: "consectetur adipisicing elit. Inventore aut provident cum rerum! Vero nemo error nesciunt sunt illo ea iste porro pariatur necessitatibus! Quidem unde voluptatem animi cum, adipisci."
        }]
    }
    var app = new Vue({
        el: "#app",
        data: data,
        methods: {
            activeTab: function(indx) {
                this.activeTabIndex = indx
            }
        },
        computed: {

        },
        filters: {

        },
    })

</script>

</html>