本文实例为大家分享了vue.js实现图片切换功能的具体代码，供大家参考，具体内容如下 实现功能如下 文件目录如下，要实现本功能只需要修改图片的存储位置即可 代码如下 <
本文实例为大家分享了vue.js实现图片切换功能的具体代码，供大家参考，具体内容如下
实现功能如下
文件目录如下，要实现本功能只需要修改图片的存储位置即可
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/CSS">
div {
margin: 0 auto;
width:200px;
height: 300px;
border: 1px solid aqua;
}
img {
margin: 0 auto;
width: 200px;
height: 250px;
border: 1px solid aqua;
}
</style>
<body>
<div id="app">
<img :src="imgSrc[index]" >
<button type="button" @click="prephoto()">上一张</button>
<button type="button" @click="nextphoto()">下一张</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
imgSrc:["./img/1.jpg","./img/2.jpg"],
index:1
},
methods:{
prephoto:function(){
this.index--;
if(this.index===-1)
{
this.index=this.imgSrc.length-1;
}
console.log(this.index)
},
nextphoto:function(){
this.index++;
if(this.index===this.imgSrc.length){
this.index=0;
}
console.log(this.index)
}
}
})
</script>
</body>
</html>适合初学者。
--结束END--
本文标题: Vue.js实现图片切换功能
本文链接: https://www.lsjlt.com/news/129115.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