vue之tab栏切换总结

青旅半醒 2023-06-24 15:29 20阅读 0赞

### 一、v-show控制内容切换 ###

用点击事件改变cur的值来控制tab样式和内容显示隐藏。

数据渲染原理:利用v-for绑定的index来控制点击对应内容的下标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

### 二、组件切换。利用vue中的特性自带属性keep-alive的缓存（ keep-alive的属性有三个官网可以查看 ） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1][]

### 三、路由切换。对地址栏和数据请求通过实现 this.$roter.push的跳转 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019122409405085.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191224094156272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191224094245641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 3.3.1-练习：tab栏切换

jQuery实现简易的tab栏切换 <!DOCTYPE html> <html lang="en"> <head> <met

冷不防/ 2023年07月15日 09:29/ 0 赞/ 130 阅读

相关 js实现tab栏切换

![在这里插入图片描述][20200304175315638.PNG] html+css <style> .tab2 { wid

拼搏现实的明天。/ 2023年07月11日 06:24/ 0 赞/ 45 阅读

相关 tab栏的简单切换

tab栏的简单切换样式不是很好看，主要的是思路和逻辑上代码： <!DOCTYPE html> <html lang="en"> <

绝地灬酷狼/ 2023年07月08日 09:22/ 0 赞/ 60 阅读

相关 jquery 基础+Tab栏切换案例

类操作在原生JS里面className会覆盖元素原来有的类名 jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名添加类名 add

Bertha 。/ 2023年07月08日 05:48/ 0 赞/ 48 阅读

相关 jQuery样式操作（Tab栏切换）

一、操作方法主要有两种方法：一种是操作css方法，另外一种是设置类样式。操作css方法 1. 参数只写属性名，则返回属性值 2. 参数是属性名，属性值，逗号隔

心已赠人/ 2023年07月03日 13:28/ 0 赞/ 46 阅读

相关 vue之tab栏切换总结

一、v-show控制内容切换用点击事件改变cur的值来控制tab样式和内容显示隐藏。数据渲染原理:利用v-for绑定的index来控制点击对应内容的下标 ![wa

青旅半醒/ 2023年06月24日 15:29/ 0 赞/ 21 阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 220 阅读

相关 tab栏切换练习

![在这里插入图片描述][20200806104510340.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

绝地灬酷狼/ 2022年11月24日 12:56/ 0 赞/ 199 阅读

相关 jQuery实战_tab栏切换

jQuery实现tab栏切换 HTML结构： <ul> <li class="active">第一栏</li> <li>第二

朱雀/ 2022年05月22日 12:40/ 0 赞/ 339 阅读

相关 vue tab切换

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

忘是亡心i/ 2022年02月21日 05:54/ 0 赞/ 365 阅读