vue实现图片切换效果
更新时间：2021年06月25日 09:45:24 作者：程序员在努力
这篇文章主要为大家详细介绍了vue实现图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现图片切换效果的具体代码，供大家参考，具体内容如下
1）v-if/v-show
二者都可以实现让元素隐藏和显示。但是实现原理不同：
v-if 是通过将元素从dom树中移除和添加来实现元素的隐藏和显示效果。
v-show 是通过修改元素的displace值来实现元素的隐藏和显示效果。
2）v-bind
v-bind可以对元素的属性值进行修改。
基于这些背景知识，下面来实现图片切换实例。
功能需求
1）点击左边按钮，显示前一张图片；如果图片是第一张，则隐藏该按钮
2）点击右边按钮，显示后一张图片；如果图片是最后一张，则隐藏该按钮
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片切换效果</title>
<style>
#test{
position: absolute;
}
#left{
position: absolute;
top: 134px;
z-index: 99;
width: 24px;
height: 32px;
background-color: black;
color: white;
font-size: 24px;
opacity: 0.6;
cursor: pointer;
}
#right{
position: absolute;
right: 0;
top: 134px;
z-index: 99;
width: 24px;
height: 32px;
background-color: black;
color: white;
font-size: 24px;
opacity: 0.6;
cursor: pointer;
}
img{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="test" >
<div id="left" @click = "changeleft" v-if="lefttt"> < </div>
<img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
<div id="right" @click = "changeright" v-show="righttt"> > </div>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var dated = new Vue({
//挂载点
el: "#test",
//数据
data: {
num: 1,
lefttt:false,
righttt:true,
},
methods: {
changeleft : function (){
if(this.num <= 2){
this.lefttt=false;
this.num = 1;
}else{
this.lefttt=true;
this.num--;
}
this.righttt=true;
},
changeright : function (){
if(this.num >= 7){
this.righttt=false;
this.num = 8;
}else{
this.righttt=true;
this.num++;
}
this.lefttt=true;
}
}
});
</script>
</html>
效果
1）显示第一张图片时
2）显示最后一张图片时
3）显示其他张图片时
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
解决vue prop传值default属性如何使用,为何不生效的问题
这篇文章主要介绍了解决vue prop传值default属性如何使用,为何不生效的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
使用ElementUI el-upload实现一次性上传多个文件
在日常的前端开发中,文件上传是一个非常常见的需求,尤其是在用户需要一次性上传多个文件的场景下,ElementUI作为一款非常优秀的Vue.js 2.0组件库,为我们提供了丰富的UI组件,本文介绍了如何使用ElementUI el-upload实现一次性上传多个文件,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue刷新后瞬间闪烁,无法解析的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了关于vue设置环境变量全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了Vue.use与Vue.prototype的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue路由分文件拆分管理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家介绍了vue实现过渡动画Message消息提示组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了Vue-cli来构建Vue项目的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
elementui Select选择器嵌套tree实现TreeSelect方式
这篇文章主要介绍了elementui Select选择器嵌套tree实现TreeSelect方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue3导入Elementplus时组件无法加载的情况及解决
这篇文章主要介绍了Vue3导入Elementplus时组件无法加载的情况及解决方案,具有很好的参考价值,希望对大家有所帮助2024-03-03
最新评论