vue基本效果集

一、來個tab切換

<template>
    <div>

        <ul >
            <li v-for="(item,index) of items" :class="{active:clickNum == index}" @click="clickNum = index">{{item.title}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) of items" v-show="clickNum == index">{{item.cont}}</li>
        </ul>
    </div>
</template>

<!--clickNum == index 表示：當clickNUm等於所迴圈li索引值index的時候，給li新增class為active-->
<!--v-show="clickNum == index" 同上-->
<script>
export default {
    data () { 
        return {
            items:[
            {title:'first',cont:'firstCont'},
            {title:'second',cont:'secondCont'},
            {title:'third',cont:'thirdCont'},
            {title:'fourth',cont:'fourthCont'}
        ],
        clickNum:0
        }
    }
}

</script>
複製程式碼