Vue.js实现tab切换效果

div idapp !-- 推荐这种写法-- ul classtab-tit li v-for(title,index) in tabTitle clickcurindex :class{active:curindex}{{title}}/li /ul div classtab-content div v-for(m,index) in tabMain v-showcurindex{{m}}/div /div /div script typetext/javascript window.onload function(){ var app new Vue({ el:#app, data:{ tabTitle: [标题一, 标题二, 标题三, 标题四], tabMain: [内容一, 内容二, 内容三, 内容四], cur: 0 //默认选中第一个tab } }) } /script style typetext/css ul li { margin: 0; padding: 0; list-style: none; } #app { width: 600px; height: 400px; margin: 0 auto; border: 1px solid #ccc; } .tab-tilte{ width: 90%; } .tab-tilte li{ float: left; width: 25%; padding: 10px 0; text-align: center; background-color:#f4f4f4; cursor: pointer; } /* 点击对应的标题添加对应的背景颜色 */ .tab-tilte .active{ background-color: #09f; color: #fff; } .tab-content div{ float: left; width: 25%; line-height: 100px; text-align: center; } /style