怎么新建MySQL数据库
发布时间：2022-07-11
作者：admin
阅读：369
阅读：369
这篇文章将为大家详细讲解有关“在vue框架怎么样实现图片点击切换的功能”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
以上就是关于“在vue框架怎么样实现图片点击切换的功能”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
本文实例为大家分享了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>
适合初学者。
以上就是关于“在vue框架怎么样实现图片点击切换的功能”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理