本文实例讲述了vue2.0实现的tab标签切换效果。分享给大家供大家参考，具体如下：
这里利用vue2.0 实现tab标签切换效果 比较实用
初学vue，练习写了一个demo 网上有很多同样的例子，但都只是改text数据，如果我想加入图片或者复杂的dom结构就不实用，今天这个就刚好可以。
先上代码：
html部分 【记得引入vue文件哦】
www.jb51.net vue2.0 实现tab标签切换
.tab{width: 100px;height: 30px;text-align: center;border: 1px solid #ccc;float: left;line-height: 30px;}
.on{background: red; color: #fff;}
aaa内容可以自行修改
内容可以自行修改bbb
内容可以自行修改ccc
内容可以自行修改ddd
{{key}}
js部分
这样写的好处就是，可以在dom结构中自行定义内容，if判断只是规定了某些内容要不要显示
使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：
希望本文所述对大家vue.js程序设计有所帮助。
