【Vue】小案例-波仔的学习之旅

最新推荐文章于 2024-07-22 15:13:59 发布

只会CV只会CV只会CV

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量209

点赞数 1

分类专栏： Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_39921135/article/details/139295305

版权

Vue 专栏收录该内容

228 篇文章 0 订阅

订阅专栏

需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片

实现思路：

1.数组存储图片路径 ['url1','url2','url3'，...]

2.可以准备个下标index 去数组中取图片地址。

3.通过v-bind给src绑定当前的图片地址

4.点击上一页下一页只需要修改下标的值即可

5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

<body>
  <div id="app">
    <button v-show="index > 0" @click="index--">上一页</button>
    <div>
      <img :src="list[index]" alt="">
    </div>
    <button v-show="index < list.length - 1" @click="index++">下一页</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  </script>
</body>

只会CV只会CV只会CV

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】小案例-波仔的学习之旅

5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏。需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片。2.可以准备个下标index 去数组中取图片地址。3.通过v-bind给src绑定当前的图片地址。4.点击上一页下一页只需要修改下标的值即可。1.数组存储图片路径。
复制链接

扫一扫

专栏目录