vue滑动切换页面(vue实现点击翻转效果)
类别:编程学习 浏览量:2472
时间:2021-10-02 01:29:40 vue滑动切换页面
vue实现点击翻转效果用vue简单实现一个点击翻转的效果,供大家参考,具体内容如下
1、
2、
3、
//html代码 测试 demo命名随便复制来的 <li class="Demo"> <li class="Before" :class="isTop ? 'contain-Before' : ''" @click="handleBefore"></li> <li class="After" :class="isTop ? 'contain-After' : ''" @click="handleAfter" style="font-size:20px;color:black">这个是背面内容</li> </li> //在data中定义 isTop:false //methods中的方法 handleBefore(){ if(!this.isTop){ this.isTop = true } }, handleAfter(){ if(this.isTop){ this.isTop = false } }
//css .Demo{ width: 375px; height: 300px; margin-top: 50px; /* margin-left: 500px; */ position: relative; perspective: 800px; box-sizing: border-box; } .Before{ width: 100px; height: 200px; position: absolute; top:0; left: 0; background-repeat: no-repeat; background-position: center center; backface-visibility: hidden; transition: 1.5s; background-image:url('../assets/images/chunfen4.jpg" alt="vue滑动切换页面(vue实现点击翻转效果)" border="0" />
大功告成,如果想要滑过翻转的话自行去掉事件,给li添加 :hover 方法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue切换图片效果(Vue.js实现图片切换功能)
- vue集成文件上传插件(vue 实现上传组件)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- vue前端打包发布教程(Vue项目打包、合并及压缩优化网页响应速度)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- vue监控对象变化(Vue之监听方法案例详解)
- vue图片切换软件(Vue实现简单图片切换效果)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- vue 优雅写法(使用vue实现手写签名功能)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vue如何加速(vue函数防抖与节流的正确使用方法)
- vue重置密码(Vue 两个字段联合校验之修改密码功能的实现)
- 鱿鱼炒蒜苔不是黑暗料理,这样做清香扑鼻,鲜美脆嫩,开胃又下饭(鱿鱼炒蒜苔不是黑暗料理)
- 蒜苔炒鱿鱼(蒜苔炒鱿鱼)
- 远离 五毛食品 洛阳80后妈妈发明的 飞行棋 成校园爆款 玩具(远离五毛食品)
- 失传的古代飞行棋游戏 六博(失传的古代飞行棋游戏)
- 感冒要吃什么药(猫咪感冒要吃什么药)
- 下雪会怎样(下雪怎样画)
热门推荐
- axios自动重复提交请求(Axios取消重复请求的方法实例详解)
- django响应返回的常用方法(Django异步任务之Celery的基本使用)
- 腾讯云服务器如何安装宝塔面板(腾讯云服务器打开宝塔面板失败是怎么回事?)
- python html文字分段(Python对HTML转义字符进行反转义的实现方法)
- python线程自动停止了(解决Python中定时任务线程无法自动退出的问题)
- 国内优惠的云服务器租用多少钱(云服务器租用的价格怎么算?)
- pythonyield有什么用(彻底理解Python中的yield关键字)
- 如何激活ubunturoot账号(欧洲vps安装Ubuntu系统如何设置root登录)
- php教程微信支付技术(php微信扫码支付 php公众号支付)
- HttpWebResponse.StatusCode请求状态代码