vue实现图片分页

清梦压星河_Ciao

于 2023-10-30 16:05:11 发布

阅读量405

点赞数

分类专栏： # vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_53951384/article/details/134121701

版权

vue 专栏收录该内容

35 篇文章 5 订阅

订阅专栏

本小节学会使用v-show和@click 、v-bind，v-bind可以简写为:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>
  <div id="app">
    <button v-show="index>0" @click="index--">上一页</button>
    <div>
      <img :src="list[index]">
    </div>
    <button v-show="index < list.length-1" @click="index++">下一页</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        list: [
          './imgs/001.png',
          './imgs/002.png',
          './imgs/003.png',
          './imgs/004.png'
        ]
      }
    })
  </script>
</body>

</html>