vue切换图片效果
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">
li {
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>
<li id="app">
<img :src="imgSrc[index]" >
<button type="button" @click="prephoto()">上一张</button>
<button type="button" @click="nextphoto()">下一张</button>
</li>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
imgSrc:["./img/1.jpg" alt="vue切换图片效果（Vue.js实现图片切换功能）" border="0" />
适合初学者。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。