A-A+

vue.js实现tab标签页的切换效果【不用vue-router】

2016年09月21日 vue.js 暂无评论

在用vue.js开发我们的多页面项目时,遇到需要实现点击增加一个active的class,且其它的标签去除。
这个效果的实现在用jquery时非常容易实现,当然,在用vue-router的情况下也非常容易实现。
不过我们并不需要引入router,那我们的实现就可以通过属性和数值进行控制。
思路如下:
1、给每个标签赋一个索引(如果是用v-for渲染出来的话,会有$index这个变量);
2、通过点击控制data里的一个变量num的数值;
3、判断标签页的索引值是否与变量num的值相等,从而实现赋值;
html代码:
 

js代码:

标签:

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录