使用vue-router与v-if实现tab切换遇到的问题及解决方法


Posted in Javascript onSeptember 07, 2018

vue-router 该如何使用

忽然碰到一个常见的问题,明明可以使用 v-if / v-show 可以的解决的问题,有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间,我有些犹豫了,有没有必要滥用 vue-router。那到底何时用才叫合理呢?

先上代码,用两种方式实现的效果

使用vue-router

router

import Tab1 from './components/tab/TabOne'
import Tab2 from './components/tab/TabTwo'
import Tab3 from './components/tab/TabThree'
import Tab4 from './components/tab/TabFour'
const routes = [
 {path: '/tab1', component: Tab1},
 {path: '/tab2', component: Tab2},
 {path: '/tab3', component: Tab3},
 {path: '/tab4', component: Tab4},
]
const router = new VueRouter({
 routes
})

.vue 文件中

<div class="tab">
 <router-link to="/tab1">tab1</router-link>
 <router-link to="/tab2">tab2</router-link>
 <router-link to="/tab3">tab3</router-link>
 <router-link to="/tab4">tab4</router-link>
 <router-view></router-view>
</div>

使用 v-if/v-show

.vue

<div class="tab">
 <button @click="handleTab(1)">tab1</button>
 <button @click="handleTab(2)">tab2</button>
 <button @click="handleTab(3)">tab3</button>
 <button @click="handleTab(4)">tab4</button>
 <div v-if="isShow === 1"><Tab1 /></div>
 <div v-if="isShow === 2"><Tab2 /></div>
 <div v-if="isShow === 3"><Tab3 /></div>
 <div v-if="isShow === 4"><Tab4 /></div>
</div>
/**
 * script
 */
 data () {
  return {
   isShow: 1
  }
 },
 methods: {
  handleTab (v) {
   this.isShow = v
  }
 }

效果如下

使用vue-router与v-if实现tab切换遇到的问题及解决方法

  • 上方为路由
  • 下方为v-if

目前看起来效果一致。那就从另一个角度考虑,页面结构。

vue-router

使用vue-router与v-if实现tab切换遇到的问题及解决方法

v-if

使用vue-router与v-if实现tab切换遇到的问题及解决方法

总结:

  • 目前看起来,效果没有很大区别,代码量也没有减少
  • 使用原生,可能是用索引进行关联,在vue中推荐使用 数据进行驱动
  • 暂且记录一笔,以待后期继续研究

以上所述是小编给大家介绍的vue-router与v-if实现tab切换的思考,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
微信小程序实现弹框效果
May 26 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 #Javascript
详解JavaScript事件循环机制
Sep 07 #Javascript
解决vue 引入子组件报错的问题
Sep 06 #Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 #Javascript
vue 解决循环引用组件报错的问题
Sep 06 #Javascript
vue slots 组件的组合/分发实例
Sep 06 #Javascript
React注册倒计时功能的实现
Sep 06 #Javascript
You might like
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP中header用法小结
2016/05/23 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python交互式图形编程实例(二)
2017/11/17 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
详解python调用cmd命令三种方法
2019/07/08 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
python中random模块详解
2021/03/01 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
房产公证书范本
2014/04/10 职场文书
医药销售自荐书
2014/05/29 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
企业员工辞职信范文
2015/05/12 职场文书
九九重阳节致辞
2015/07/31 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python