vue中怎么清空tab选项卡的缓存_vue动态组件做tab选项卡

vue与jquery相比,最大的变化就是大大减少了节点的操作,组件化更是好用到不行。往日都是用jquery做tab选项卡,今天有多余的时间,就顺便拿起了接触不多的vue来研究一下。

一说到选项卡,了解vue的人都会想到,用组件的切换来实现。

大概思路就是:

用 :is=“”来动态渲染组件

具体操作:

491809ee4071

html

491809ee4071

js

JS代码中,首先要把你需要切换的组件全部引入进来(这个方法我个人觉得可能有点浪费资源,但目前还没有找到更便捷的方法),这个currentView是一个变量,为了初始化页面的时候默认渲染一个组件,这里给初始值可以是你想要初始化页面就显示的组件名字。

491809ee4071

function

在methods里面写点击事件,这里要解释的就是,当你点击li的时候传参aa,把li的下标(index)传进来,新建一个数组,把要切换的组件名添加进去,成为一个新数组,这里把currentView替换成数组对应下标的一个元素,这一步其实就是让currentView数组的下标和li的下标相对应。

到此为止已经可以实现tab最基本的切换功能,更多特效可以自行添加。

注:这里有可能会出现报错,具体原因我也不太清楚,但是加上keep-alive标签包裹一下组件就行了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值