DDR爱好者之家

使用vue-router与v-if实现tab切换遇到的问题及解决方法
站长资源 2024/11/26 佚名
19 1538
DDR爱好者之家 Design By 杰米

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切换的思考，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米