<div>
<div><!DOCTYPE html></div>
<div><html lang="en"></div>
<div><head></div>
<div><meta charset="UTF-8"></div>
<div><meta name="viewport" content="width=device-width, initial-scale=1.0"></div>
<div><title>Document</title></div>
<div><style></div>
<div>body {</div>
<div>background: #bbb;</div>
<div>}</div>
<div>.active {</div>
<div>color: red;</div>
<div>}</div>
<div></style></div>
<div></head></div>
<div><body></div>
<div><div id="my"></div>
<div></div>
<div><ul class="tab-tit"></div>
<div><li v-for="(v,index) in title" @click="action(index)" v-bind:class="n==index?'active':''">{{v}}</li></div>
<div></ul></div>
<div><div class="tab-con"></div>
<div><div v-for="(v,index) in content" v-show="n==index">{{v}}</div></div>
<div></div></div>
<div></div>
<div><ul class="tab-tit"></div>
<div><li v-for="(v,index) in lists" @click="action(index)" v-bind:class="n==index?'active':''">{{v.title}}</li></div>
<div></ul></div>
<div><div class="tab-con"></div>
<div><div v-for="(v,index) in lists" v-show="n==index">{{v.content}}</div></div>
<div></div></div>
<div></div></div>
<div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></div>
<div><script></div>
<div>new Vue({</div>
<div>el: '#my',</div>
<div>data() {</div>
<div>return {</div>
<div>n: 0,</div>
<div>title: [</div>
<div>'标题1','标题2','标题3','标题4'</div>
<div>],</div>
<div>content: [</div>
<div>'内容一',</div>
<div>'内容二',</div>
<div>'内容三',</div>
<div>'内容四',</div>
<div>],</div>
<div>lists: [</div>
<div>{title: 'a', content: 'a1'},</div>
<div>{title: 'b', content: 'b1'},</div>
<div>{title: 'c', content: 'c1'},</div>
<div>{title: 'd', content: 'd1'},</div>
<div>]</div>
<div>}</div>
<div>},</div>
<div>methods: {</div>
<div>action(i) {</div>
<div>this.n = i</div>
<div>}</div>
<div>}</div>
<div>})</div>
<div></script></div>
<div></body></div>
<div></html></div>
<div></div>
</div>
