本文实例为大家分享了Vue实现图片切换效果的具体代码，供大家参考，具体内容如下 1）v-if/v-show 二者都可以实现让元素隐藏和显示。但是实现原理不同： v-if 是通过将元素
本文实例为大家分享了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）显示其他张图片时
--结束END--
本文标题: vue实现图片切换效果
本文链接: https://www.lsjlt.com/news/129104.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0