<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <title></title> <style type="text/css"> .active{ color: red;
border-bottom: 1px solid red;
display: inline-block;
} </style> </head> <body> <div id="app"> <ul> <li v-for="(index,items) in tabs" :class="{active:index == num}" @click="tab(index)">{{items}} </li> </ul> <div class="tabCon"> <div v-for='(index,itemCon) in tabContents' v-show=" index == num">{{itemCon}} </div> </div> </div> <!--这里是js代码--> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { tabs: ["标题一", "标题二","标题三"], tabContents: ["内容一", "内容二","内容三"], num:0 }, methods: { tab(index) { console.log(index) this.num = index; } } }); </script> </body> </html>