在沒有學習Vue之前，想要做一個Tabs切換功能，首先想到的當然是通過DOM操作改變元素的class。然而Vue操作的是資料，雖然在方法中可以隨心所欲得寫原生js程式碼來操作DOM，但這會非常彆扭。初學者使用Vue的時候一定要切換一下思維。 

<style>
    li{
        list-style-type: none;
        display: inline-block;
        margin-right: 0.5rem;
    }
    .normal{
        color: green;
    }
    .active{
        color: red;
    }
</style>
<ul id="myTab">
    <li class="normal" v-for="(item,index) in items" :key="item.id" :class="{'active':isActive==index}" @click="change(index)">
        {{item}}
    </li>
</ul>
</body>
<script>
    new Vue({
        el: "#myTab",
        data: {
            items: [
                'item1',
                'item2',
                'item3'
            ],
            isActive: 0 //索引值預設為0，即item1為預設啟用的選項卡
        },
        methods: {
            change: function (index) {
                this.isActive = index;
            }
        }
    })
</script>
 

思路非常簡單，就是通過點選改變isActive的值使之與當前元素的索引index值相等，以此改變布林值來控制class的切換