当前位置:编程学习 > > 正文

vue切换图片效果(Vue.js实现图片切换功能)

时间:2021-10-21 07:23:55类别:编程学习

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" />
    
  • 适合初学者。

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

    上一篇下一篇

    猜您喜欢

    热门推荐