VUE简单tab切换

html：

<div id="my">


        <ul class="title">
            <li v-for="(item,index) in title" @click="tab=index" :class="{'active':tab==index}">{{item}}</li>
        </ul>

        <div class="menu">
            <div v-for="(item,index) in menu" v-show="tab==index">{{item}}</div>
        </div>

    </div>

 

css：

<style>

        li{
            list-style:none;
        }
        .title li{
            float: left;
            margin-left:40px;
            cursor: pointer;
        }
        .menu{
            clear:both;
            margin-left:80px;
            padding-top:20px;
        }
        .active{
            color:blue;
            border-bottom:1px solid blue;
            padding-bottom:5px;
        }

    </style>

js：

<script type="text/javascript" src="bower_components/vue/dist/vue.js"></script>

    <script>

        window.onload=function(){
            new Vue({
                 el:"#my",
                 data:{
                    title:[
                        "精选肉类","海鲜水产","休闲食品","名品酒庄"
                    ],
                    menu:[
                        "精选肉类","海鲜水产","休闲食品","名品酒庄"
                    ],
                    tab:1
                 },

            })
        }


    </script>