php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果:
这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样:
那么用vue.js实现上述的效果,其实也有两种途径,一种使用vue-router,vue-router是vue.js的一个路由组件,在单页面应用中非常非常流行,如果切换的层数据量非常大的话,比如每个层都要有服务器进行大量的数据交互,那么强烈建议使用vue-router,因为vue-router在每次切换路由的过程中,都会自动销毁(destroyed)前面的组件,这样在频繁的操作中页面也不会卡,而且vue-router也定义了页面切换过程中的过渡动画。
如果数据量并不复杂的话,可以直接通过vue.js定义切换状态来切换不同的层。
首先先把template和css写好:
其中introduce、chatbar、videobar分别代表三个需要跟随button切换的组件,接下来就可以给vue.js的button节点绑定事件来操控点击状态:
点击不同的button,会让active的状态改变,同时这个状态会作用到button上面,比如让被点击的button有个高亮的效果等等。
那么如何让active的状态作用到弹出层呢?其实定义一个computed函数就可以了:
总结
以上所述是小编给大家介绍的vue.js实现标签页切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
php 标签页切换,vue.js实现标签页切换效果相关推荐
- 使用 Vuex + Vue.js 构建单页应用 1
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
- vue中如何点击返回上一页,vue判断没有上页返回首页
vue中如何点击返回上一页,vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){this.$router.go(-1); }, 返回上一页,先判断是否有上一页,没有则返 ...
- vue为p标签_通过vue.js几个基本操作,理解一下什么是插槽「606」
更多的文章,请关注我的头条号,我是落笔承冰. 一.先创建一个test1.html文件,还是得在head里链接vue的库. 二.创建一个父组件一个全局子组件. 三.给子组件添加模板吧,然后在父组件里显示 ...
- 使用 Vuex + Vue.js 构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
- 如何使用Vuex+Vue.js构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
- 详情页html特效,js实现详情页放大镜效果
本文实例为大家分享了js实现详情页放大镜的具体代码,供大家参考,具体内容如下 1.html 2.css *{ margin:0;padding:0; } #small{ width:400px; he ...
- html仿京东选项卡切换代码,js仿京东轮播效果 选项卡套选项卡使用
本文实例为大家分享了js仿京东轮播效果的具体代码,实现选项卡套用选项卡,供大家参考,具体内容如下 效果图: 代码: 无标题文档 *{margin:0;padding:0;} ul{list-style ...
- 单页和多页应用(vue.js学习笔记)
1.什么是单页面和多页面? 单页: 单页应用将所有内容放在一个页面中,从而使整个页面更加流畅就用户体验而言,单机导航可以定位锚点,快速定位相应的部分,并轻松上下滚动.单页面应用提供的信息和一些主要内容 ...
- html下一页怎么实现,JS代码实现页面切换效果(上一页+具体页+下一页)
HTML+CSS部分 添加所有页面,和上一页.具体页.下一页的按钮, 设置div样式,默认第一页显示,其他页隐藏. .item { display: none; width: 300px; heigh ...
最新文章
- Python时间戳转时间
- adb shell 修改文件名_从零开始学Linux运维|27.Shell编程(函数与参数的传递)
- 算法中的递归分析和分治法的原理
- gis影像格式img转为ecw_医学影像图片格式
- javax.servlet.jsp.JspTagException:
- 基于蓝墨云平台的计算机教学,基于蓝墨云班课的中职计算机“分层教学”模式探究...
- revit模型怎么在手机上看_沙盘模型应该怎么看?一定要警惕这些问题
- Windows Server 2008 R2/2012 网络负载平衡NLB相关内容
- arcgis批量处理nc文件_ArcGIS处理NetCDF(.nc)的多维科学数据
- cms是什么意思啊_美团面试官问我:ZGC 的 Z 是什么意思?
- 超 8 亿人收发微信春节红包;苹果自研 iPhone 芯片;暴雪或将大裁员 | 极客头条...
- 电力拖动自动控制系统_教授为你解读“电气工程及其自动化”专业类
- 学生科学计算机,学生科学计算器
- 计算机简历个人优势,简历个人优势怎么写
- java多人聊天_java编程实现多人聊天室功能
- 继明当时明月在:万历十五年
- conda create创建虚拟环境失败
- 学习用Photoshop来设计简单的网页
- Vue 组件封装之 ScrollView 上拉加载更多
- 【高质量图片批量压缩工具】Squash 2.0.4 for Mac
热门文章
- 三维旋转四元数系列(0.复数基本介绍)
- Windows10安装ubuntu 20双系统
- PostgreSQL进程结构
- DSP集成的AIC23芯片的音频接口
- C++:求五位学生的总成绩以及平均成绩
- 【更新】Infragistics Ultimate UI for Windows Forms v18
- Spring @Async 注解
- linux自学笔记--memcache和varnish缓存服务器
- codeforces798C - Mike and gcd problem (数论+思维)
- 父元素与子元素的width关系