最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么做选项卡

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js做选项卡的方法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Tab选项卡</title>
            <script src="js/vue.js"></script>
            <style>
                *{
                    margin: 0px;
                    padding: 0px;
                }
                #tab{
                    width:420px;
                    margin: 20px auto;
                    position: relative;
                }
                #tab ul li{
                    width: 100px;
                    height: 30px;
                    border: 1px solid #6699CC;
                    float: left;
                    list-style: none;
                    text-align: center;
                    line-height: 30px;
                }
                #tab ul li:first-child{
                    border-right: none;
                    border-radius: 10px 0px 0px 0px;
                }
                #tab ul li:last-child{
                    border-left: none;
                    border-radius: 0px 10px 0px 0px;
                }
                #tab ul .active{
                    background-color:#6699CC;
                    color:white;
                }
                #tab div{
                    width: 415px;
                    position: absolute;
                    top: 32px;
                    display: none;
                }
                #tab div img{
                    width: 406px;
                    border-radius:0px 0px 10px 10px;
                }
                #tab div.current{
                    display: block;
                }
            </style>
        </head>
        <body>
            <div id="tab">
                <ul>
                    <li v-on:mouseover="change(index)" :class="[currentindex==index?'active':'']":key="item.id"v-for="(item,index) in list">{{item.text}}</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 vue1 = new Vue({
                    el:'#tab',
                    data:{
                        currentindex:'0',//当前选项卡的索引
                        list:[{
                            id:'1',
                            text:'春',
                            imgsrc:'img/1.jpg'
                        },{
                            id:'2',
                            text:'夏',
                            imgsrc:'img/2.jpg'
                        },{
                            id:'3',
                            text:'秋',
                            imgsrc:'img/3.jpg'
                        },{
                            id:'4',
                            text:'冬',
                            imgsrc:'img/4.jpg'
                        }]
                    },
                    methods:{
                        change:function(index){
                            this.currentindex=index;
                        }
                    }
                });
            </script>
        </body>
    </html>

    以上就是vue.js怎么做选项卡的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么做选项卡
    • 257会员总数(位)
    • 5897资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 540稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情