需求：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;
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;
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>