300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue中怎么清空tab选项卡的缓存_vue动态组件做tab选项卡

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

时间:2024-06-12 17:09:45

相关推荐

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

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

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

大概思路就是:

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

具体操作:

html

js

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

function

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。