vue 选项卡 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
        <style type="text/css">
            .active{
                color: red；

　　　　　　　　　　border-bottom: 1px solid red;

　　　　　　　　　　　display: inline-block;

            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li 
                v-for="(index,items) in tabs" 
                :class="{active:index == num}"
                 @click="tab(index)">{{items}}
                </li>
            </ul>
            <div class="tabCon">
                <div 
                    v-for='(index,itemCon) in tabContents' 
                    v-show=" index == num">{{itemCon}}
                </div>
            </div>
        </div>
    <!--这里是js代码-->
    <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            tabs: ["标题一", "标题二","标题三"],
            tabContents: ["内容一", "内容二","内容三"],
            num:0
        },
        methods: {
            tab(index) {
                console.log(index)
                this.num = index;
            }
        }
    });
    </script>
    </body>
</html>

 

posted @ 2017-09-29 15:51  \面朝阳光/  阅读(349)  评论(0)  编辑  收藏  举报