vue 实现tab切换保持数据状态

2024-10-18 13:19:22

页面做tab切换，由于组件每一次切换都会重新实例化组件，我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新，减少页面重新渲染以及减少请求

实现方法：使用<keep-alive></keep-alive>包裹组件

<el-tabs v-model="activeName" @tab-click="handleClick">
 <el-tab-pane label="记录">
 <keep-alive>
  <child1 v-if="isChildUpdate"></child1>
 </keep-alive>
 </el-tab-pane>
</el-tabs>

列表页面跳转详情，列表页面保持上一次操作状态

通过是否加载router-view 和路由元meta设置页面是否需要缓存来实现

router-view嵌套多层的话，可能要设置多层，然后通过beforeRouteLeave监听路由离开，设置是否缓存

//从其他页面跳转不需要缓存页面从详情页面回来则需要缓存

补充知识：vue 动态组件（tabs切换）keep-alive：主要用于保留组件状态或避免重新渲染

通过keep-alive 保留数据值填写数据时切换到其他页面，后返回当前页数据保留，主要用于保留组件状态或避免重新渲染

 <!--动态组件-component使用-->
 <div class="app">
 <ul>
  <li @click="currView='home'">首页</li>
  <li @click="currView='abount'">关于我们</li>
 </ul>
 <!--通过keep-alive 保留数据值 填写数据时切换到其他页面，后返回当前页数据保留-->
 <keep-alive>
  <component :is="currView"></component>
 </keep-alive>
 </div>

<script type="text/x-Template" id="homeTemp">
   <h2>首页数据</h2>
</script>
<script type="text/x-Template" id="abountTemp">
   <h2>关于我们数据<input type="text"/></h2>
</script>

<script type="text/javascript">
 var vm=new Vue({
  el:'.app',
  data:{
   currView:"home"
  },
  components:{
   "home":{
     template:"#homeTemp"
   },
   "abount":{
    template:"#abountTemp"
   }
  }
 });

</script>

以上这篇vue 实现tab切换保持数据状态就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

详解使用vue实现tab 切换操作

在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()
Vue.js实现tab切换效果

Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里
vue仿淘宝订单状态的tab切换效果

前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换. HTML 代码: <div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span v-for="(item, i
vue 实现tab切换保持数据状态

页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新,减少页面重新渲染以及减少请求实现方法:使用<keep-alive></keep-alive>包裹组件 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="记录"> <keep-a
vue实现tab切换的3种方式及切换保持数据状态

vue实现tab切换的3种方式一.v-show控制内容切换 1.简单版原理:用点击事件改变num值作为开关,控制tab样式和内容显示隐藏. 2.数据渲染原理:主要利用v-for绑定的index来控制,跟上面差不多. 二.组件切换. 1.知识点主要是vue中is的特性,和keep-alive缓存三.路由切换.(对地址栏和数据请求友好) 通过router-link实现. vue tab切换保持数据状态页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持ta
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表瀑布流滚动加载,用于控制长列表的展示当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会自动加载一次,可以:immediate-check="false" 这样设置一下,页面加载完成后就不会自动加载一次了 ) 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发
vue实现tab切换外加样式切换方法

实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100
vue实现tab切换的放大镜效果

本文实例为大家分享了vue实现tab切换的放大镜效果的具体代码,供大家参考,具体内容如下废话不多说先看效果图 1.我这里并没有加遮罩层,如有需要请自行加上 2.图片建议使用4k高清图片,不然放大后模糊,影响观看心情 3.不用拘泥于样式,关注实现原理即可 4.可能我的方法并不简便,但是也是一种思路,请大家参考实现原理第一肯定需要vue.js 第二需要两张图片左边为现实图片,右边放大后的效果图其实一直存在,只不过鼠标移入现实,鼠标移出消失放大的图片并不是真正的放大,而是在img标签外套了一
vue刷新和tab切换实例

首先写个子组件用来放刷新的内容,命名为pull(可以看例子最后面放的.) 然后再要刷新的页面引用 <template> <div class="fbjbox container"> <div class="fbjbox1"> <tab ref='tab' :list="['推荐','热门','最新']" width="33%" @change='tabchange' style=&qu
vue tab切换,解决echartst图表宽度只有100px的问题

解决思路:直接将图表的宽高写死,根据实际代码进行改写,提供一个思路 1.将图表放进一个div里面 <div class="echarts"> <div id="myChart" :style="{width: '100%', height: '150px'}"></div> </div> 2.定义一个方法,并在mounted视图更新的时候执行 <script> export defaul
基于Vue实现tab栏切换内容不断实时刷新数据功能

先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

vue 实现tab切换保持数据状态

相关推荐

随机推荐