使用Vue.js實現Tab選項卡

時間 2020-07-10

標籤使用 vue.js vue 實現 tab 選項欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tab選項卡</title>
        <script src="js/vue.js"></script>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            #tab{
                width:310px;
                margin: 20px auto;
                position: relative;
            }
            #tab ul li{
                width: 100px;
                height: 30px;
                border: 1px solid deeppink;
                float: left;
                list-style: none;
                text-align: center;
                line-height: 30px;
            }
            #tab ul li:first-child{
                border-right: none;
                border-radius: 10px 0px 0px 10px;
            }
            #tab ul li:last-child{
                border-left: none;
                border-radius: 0px 10px 10px 0px;
            }
            #tab ul .active{
                background-color:deeppink;
                color:white;
            }
            #tab div{
                width: 305px;
                position: absolute;
                top: 32px;
                display: none;
            }
            #tab div img{
                width: 305px;
                border-radius: 10px;
            }
            #tab div.current{
                display: block;
            }
            
        </style>
    </head>
    <body>
        <div id="tab">
            <ul>
                <li @mouseover="change(index)" :class="currentindex==index?'active':''":key="item.id"v-for="(item,index) in list">{{item.num}}</li>
            </ul>
            <div :class="currentindex==index?'current':''" v-for="(item,index) in list">
                <img :key="item.id"  v-bind:src="item.imgsrc"/>
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:'#tab',
                data:{
                    currentindex:'0',//當前選項卡的索引
                    list:[{
                        id:'1',
                        num:'照片1',
                        imgsrc:'img/1.jpg'
                    },{
                        id:'2',
                        num:'照片2',
                        imgsrc:'img/2.jpg'
                    },{
                        id:'3',
                        num:'照片3',
                        imgsrc:'img/3.jpg'
                    }]
                },
                methods:{
                    change:function(index){
                        this.currentindex=index;
                    }
                }
            });
        </script>
    </body>
</html>

1. Javascript 實現Tab選項卡
2. js實現選項卡(Tab)
3. jQuery實現tab選項卡
4. jQuery實現Tab選項卡
5. js tab選項卡 mootools tab選項卡
6. TAB選項卡
7. 選項卡TAB
8. Tab選項卡
9. tab選項卡
10. Android選項卡Tab的實現
更多相關文章...
• ionic tab(選項卡) - ionic 教程
• ionic 選項卡欄操作 - ionic 教程
• ☆基於Java Instrument的Agent實現
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。