您的位置：首页 > 编程学习 > > 正文

vue切换图片效果（Vue.js实现图片切换功能）

更多时间：2021-10-21 07:23:55 类别：编程学习浏览量：1509

vue切换图片效果

Vue.js实现图片切换功能

本文实例为大家分享了Vue.js实现图片切换功能的具体代码，供大家参考，具体内容如下

实现功能如下

vue切换图片效果（Vue.js实现图片切换功能）

文件目录如下，要实现本功能只需要修改图片的存储位置即可

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">
  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" />

适合初学者。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

标签：vue.js 图片切换

上一篇：php实现无cookie的session（php实现多站点共用session实现单点登录的方法详解）

下一篇：mysql缓存和redis查询效率（浅谈MySQL与redis缓存的同步方案）

您可能感兴趣

vue切换图片效果（Vue.js实现图片切换功能）

vue切换图片效果

热门推荐

排行榜