需求：Vue实现选项卡效果
方式一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡 tabs</title> <link href=""> <style> #app { margin:100px auto 0px; width:800px; } .panel { border-top:none; } </style> </head> <body> <div> <div> <div> <ul> <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 v-show="isTab(0)"> <div> 这是未付款的订单 </div> </div> <div v-show="isTab(1)"> <div> 这是未发货的订单 </div> </div> <div v-show="isTab(2)"> <div> 这是未收货的订单 </div> </div> <div v-show="isTab(3)"> <div> 这是未评价的订单 </div> </div> <div v-show="isTab(4)"> <div> 这是所有的订单 </div> </div> </div> </div> </div> <script src=""></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>