Step 1: write out the HTML structure

First write a static effect you need to show, and then change it to VUE dynamic generation. The code is as follows:

<div id="app1" class="wrap">
    <ul class="tabs">
        <li class="active"><a href="javascript:">Label 1</a></li>
        <li><a href="javascript:">Label 2</a></li>
        <li><a href="javascript:">Label 3</a></li>
    </ul>
    <div class="tabs-con">
        <p>Content 1</p>
    </div>
    <div class="tabs-con">
        <p>Content 2</p>
    </div>
    <div class="tabs-con">
        <p>Content 3</p>
    </div>
</div>

Step 2: write css Style

Write a style for your structure. The code is as follows:

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        border-style: none;
    }
    ul,ol {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #777;
    }
    body {
        font: normal 14px/1.6 Helvetica,"Microsoft YaHei";
        color: #777;
        background-color: #f5f5f5;
    }
    .wrap {
        width: 600px;
        margin: 20px auto 0;
    }
    .tabs {
        overflow: auto;
    }
    .tabs li {
        float: left;
    }
    .tabs li a {
        display: block;
        padding: 10px 15px;
        color: #bbb;
    }
    .tabs li.active {
        background-color: #fff;
    }
    .tabs li.active a {
        color: #333;
    }
    .tabs-con {
        padding: 15px;
        background-color: #fff;
    }
</style>

Step 3: write js code

This step is the key. We need to use the content of vue

var app1 = new Vue ({
    el: '#app1',
    data: {
        //The data of the label list is an array, and the array item is an object format
        tabs: [
            {name:'Label 1'},
            {name:'Label 2'},
            {name:'Label 3'}
        ],
        num: 0
    },
    //Method, create a custom function, corresponding to the click time onclick
    methods: {
        tabsSwitch(index) {
            //Add this to the variable used to indicate the object num using the above constructor app1
            this.num = index;
        }
    }
})

Step 4: change the html structure above

<div id="app1" class="wrap">
    <ul class="tabs">
        <li v-for="(tab,index) in tabs" :class="{active:num===index}" @click="tabsSwitch(index)"><a href="javascript:">{{tab.name}}</a></li>
    </ul>
    <div class="tabs-con" v-show="num===0">
        <p>Content 1</p>
    </div>
    <div class="tabs-con" v-show="num===1">
        <p>Content 2</p>
    </div>
    <div class="tabs-con" v-show="num===2">
        <p>Content 3</p>
    </div>
</div>