vue2.0实现标签标签切换效果(内容可自定义)示例

本文通过实例描述了vue2.0实现的标签切换效果。分享给大家参考，如下：

在这里使用vue2.0实现标签切换效果更为实用

初学者vue，练习写演示。网上有很多类似的例子，但都只是改变文本数据。如果我想添加图片或复杂的dom结构，这是不现实的。今天，这正好。

代码优先：

Html部分[记得介绍vue文件]

！doctype HTML HTML Head metachartset=' UTF-8 ' titlewww.jb51.net VUE 2.0实现标签页标签切换/title/headstyletype=' text/CSS '。tab { width: 100pxheight: 30px文本对齐：中心；border: 1px固体# ccc向左浮动：线高： 30px；} .在{ background: redcolor: # fff}/style script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script src=' http 3360https://cdn . bootss.com/vue/2 . 4 . 4/vue . min . js '/script body div id=' app ' v-斗篷！-我的判断下标是用来测试的。我建议你把它改成表1.这种-！-我使用不同的类名来区分内容是否已经更新。当您查看它时，您可以查看代码更改-Div class=' aa ' v-if=' avlist==0 ' AAA内容可以自行修改/Div class=' bb ' v-else-if=' avlist==1 '内容可以自行修改BBB/Div class=' cc ' v-else-if=' avlist==2 '内容可以自行修改CCC/Div class=' DD ' v-else-if=' avlist==3 '内容可以自行修改ddd/div

script var VM=new vue({ El : ' # app '，data: {list: ['tab1 '，' tab2 '，' tab3 '，' tab4']，isclass3360 [true，false，false]，//用于指示状态。Avlist :0，}，方法： {handal:函数(a) {this。av list=a；for(var I=0；ithis . is class . length；I){ this . is class[I]=false；this . is class[a]=true；}} }，})/script的优点是可以在dom结构中定义自己的内容，如果判断只指定某些内容是否应该显示

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun对上述代码进行测试，得到如下运行结果：

希望本文对vue.js程序的设计有所帮助。