原文：https://www.cnblogs.com/supery007/p/8352412.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul li {
list-style: none;
display: inline-block;
border: 1px solid dodgerblue;
height: 30px;
line-height: 30px;
width: 120px;
text-align: center;
}
</style>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<div id="app">
<ul>
<!-- 給li標簽綁定click時間,點擊該li標簽將索引傳給函數(shù)重新賦值給num-->
<li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)" :key='index'>
{{item}}{{index}}
</li>
</ul>
<div class="tabCon">
<!-- 循環(huán)遍歷tabContents數(shù)組中的元素,v-show綁定事件,當循環(huán)的索引等于num中的值,顯示該itemCon值 -->
<div v-for='(itemCon,index) in tabContents' v-show="index == num" :key='index'>
{{itemCon}}{{index}}
</div>
</div>
</div>
<!--這里是js代碼-->
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabs: ["標題一", "標題二","標題三"],
tabContents: ["內(nèi)容一", "內(nèi)容二","內(nèi)容三"],
num: ''
},
methods: {
tab:function (index) {
this.num = index;
}
}
});
</script>
