【HTML+CSS+JavaScript+Bootstrap+Vue】选项卡（两种方式）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

需求：Vue实现选项卡效果

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡 tabs</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <style>
        #app {
            margin:100px auto 0px;
            width:800px;
        }
        .panel {
            border-top:none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs">
                    <li :class="{active: isTab(0)}" @click="setTab(0)"><a href="javascript:void(0)">未付款订单</a></li>
                    <li :class="{active: isTab(1)}" @click="setTab(1)"><a href="javascript:void(0)">未发货订单</a></li>
                    <li :class="{active: isTab(2)}" @click="setTab(2)"><a href="javascript:void(0)">未收货订单</a></li>
                    <li :class="{active: isTab(3)}" @click="setTab(3)"><a href="javascript:void(0)">未评价订单</a></li>
                    <li :class="{active: isTab(4)}" @click="setTab(4)"><a href="javascript:void(0)">所有订单</a></li>
                </ul>
                <div class="panel panel-default" v-show="isTab(0)">
                    <div class="panel-body">
                        这是未付款的订单
                    </div>
                </div>
                <div class="panel panel-default" v-show="isTab(1)">
                    <div class="panel-body">
                        这是未发货的订单
                    </div>
                </div>
                <div class="panel panel-default" v-show="isTab(2)"> 
                    <div class="panel-body">
                        这是未收货的订单
                    </div>
                </div>
                <div class="panel panel-default" v-show="isTab(3)">
                    <div class="panel-body">
                        这是未评价的订单
                    </div>
                </div>
                <div class="panel panel-default" v-show="isTab(4)">
                    <div class="panel-body">
                        这是所有的订单
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../dist/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:\'#app\',
            data: {
                tab: 0
            },
            methods: {
                setTab(index) {
                    this.tab = index;
                },
                isTab(index) {
                    return this.tab === index;
                }
            }
        })
    </script>
</body>
</html>

方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡 tabs</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <style>
        #app {
            margin:100px auto 0px;
            width:800px;
        }
        .panel {
            border-top:none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs">
                    <li :class="{active: tab == 0}" @click="tab = 0"><a href="#">未付款订单</a></li>
                    <li :class="{active: tab == 1}" @click="tab = 1"><a href="#">未发货订单</a></li>
                    <li :class="{active: tab == 2}" @click="tab = 2"><a href="#">未收货订单</a></li>
                    <li :class="{active: tab == 3}" @click="tab = 3"><a href="#">未评价订单</a></li>
                    <li :class="{active: tab == 4}" @click="tab = 4"><a href="#">所有订单</a></li>
                </ul>
                <div class="panel panel-default" v-show="tab === 0">
                    <div class="panel-body">
                        这是未付款的订单
                    </div>
                </div>
                <div class="panel panel-default" v-show="tab === 1">
                    <div class="panel-body">
                        这是未发货的订单
                    </div>
                </div>
                <div class="panel panel-default" v-show="tab === 2"> 
                    <div class="panel-body">
                        这是未收货的订单
                    </div>
                </div>
                <div class="panel panel-default" v-show="tab === 3">
                    <div class="panel-body">
                        这是未评价的订单
                    </div>
                </div>
                <div class="panel panel-default" v-show="tab === 4">
                    <div class="panel-body">
                        这是所有的订单
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../dist/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:\'#app\',
            data: {
                tab: 0
            }
        })
    </script>
</body>
</html>

以上是 【HTML+CSS+JavaScript+Bootstrap+Vue】选项卡（两种方式） 的全部内容， 来源链接： utcz.com/z/375149.html

回到顶部