vue实现图片分页

本小节学会使用v-show@clickv-bindv-bind可以简写为:

html 复制代码
<!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>
相关推荐
Mintopia7 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.10 分钟前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia20 分钟前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie11451419127 分钟前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头29 分钟前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd29 分钟前
3种XSS攻击简单案例
前端·xss
盖头盖30 分钟前
【xss基本介绍】
前端·xss
一枚前端小能手37 分钟前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖38 分钟前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号43 分钟前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js