vue点击按钮实现简单页面的切换

2026-02-15 04:36:39

本文实例为大家分享了vue点击按钮实现页面切换的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div id="app">
  <h3 v-show="tab==1">首页 </h3>
  <h3 v-show="tab==2">新闻页</h3>
  <h3 v-show="tab==3">个人页</h3>

  <button @click="tabChange" data-id="1">首页</button>
  <button @click="tabChange" data-id="2">新闻页</button>
  <button @click="tabChange" data-id="3">个人页</button>
 </div>
 <script type="text/javascript">
  let app = new Vue({
  el:"#app",
  data:{
   tab:1
  },
  methods:{
   tabChange:function(e){
   let tabid = e.target.dataset.id
   this.tab = tabid
   }
  }
  })
 </script>
 </body>
</html>

写这个要记得下载vue.js

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue页面切换过渡transition效果

首先得有你想要的过渡效果css代码: .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms; height: 100%; position: absolute; backface-visibility: hidden; perspective: 1
基于Vue实现页面切换左右滑动效果

基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in">  <router-view class="app-view" wechat-title></router-vi
Vue 页面切换效果之 BubbleTransition(推荐)

CodePen 地址前端使用 SPA 之后,能获得更多的控制权,比如页面切换动画,使用后端页面我们可能做不了上面的效果,或者做出来会出现明显的闪屏.因为所有资源都需要重新加载. 今天使用 vue,vue-router,animejs 来讲解如何上面的效果是如何实现的. 步骤点击菜单,生成 Bubble,开始执行入场动画页面跳转执行退场动画函数式调用组件我希望效果是通过一个对象去调用,而不是 v-show, v-if 之类的指令,并且为了保持统一,仍然使用 Vue 来写组件.我通常会用
vue实现app页面切换动画效果实例

因为需要实现类似APP页面切换的动画效果,百度google搜索比较少资料,所以自己写文档,希望对您有用在router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({
使用vue-router切换页面时实现设置过渡动画

背景今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来. 实现难点如何判断切换路由时是前进还是后退每次切换时向左向右切换动画如何实现解决方案我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import Vu
VUE单页面切换动画代码(全网最好的切换效果)

我就废话不多说了,直接上代码吧! // 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let dir
vue实现页面切换滑动效果

本文实例为大家分享了vue实现页面切换滑动的具体代码,供大家参考,具体内容如下试着用Vue做了个页面切换时滑动的效果,如下示例,源码这里使用了Vue的transition组件,具体可见文档直接看实现过程先在本机安装vue-cli npm install -g @vue/cli 初始化一个项目 vue create hello-world 创建完毕后安装vue-router和vuex,现在vue-cli3支持图形化界面,可以直接在项目目录用ui启动,在管理页面点击安装 vue ui 然后建
vue页面切换到滚动页面显示顶部的实例

在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示. 一.目标: 'listview'进入详情页面时详情页面从页面顶部开始显示. 二.让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律三.解决思路:进入详情页面的时候固定滚动页面的位置在顶部四.代码实现:vue里面写法如下,至于updated生
Vue实现移动端页面切换效果【推荐】

在子页面把整个页面做绝对定位,覆盖整个屏幕,子父页面将 router-view 用 transition 套起来,并加上过渡动画就可以啦. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
vue页面切换项目实现转场动画的方法

前言移动端, 使用vue为了良好的用户体验, 会需要实现APP形式的切换页面的左滑和右滑效果实现原理, vue的过渡 & 动画技术栈: vue + vue-router 解决思路区分前进和后退的路由网上搜索的资料, 找到了两种监听popstate事件 window.addEventListener('popstate', function (e) { // 用来判断是否是后退, 在判断后需要在其他地方重置 router.isBack = true },false) 在注册路由的时

vue点击按钮实现简单页面的切换

相关推荐

随机推荐