初学Vue笔记——选项卡切换功能

　　在没有学习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的切换