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>
相关推荐
昭昭颂桉a几秒前
TypeScript 前端的必修课,从 JS 到 TS
开发语言·前端·javascript·typescript
用户93851563507几秒前
从零实现一个 Todos 应用:原生 Ajax + Node 服务,顺便吃透 JSON.stringify
前端·javascript·后端
英勇无比的消炎药1 分钟前
少踩坑TinyVue插槽事件编码规范详解
vue.js
程序猿阿伟3 分钟前
《Chrome扩展:穿透沙箱与签名体系的技术本质》
前端·chrome
飘尘4 分钟前
豆包里一句话就能P图生视频,背后究竟发生了什么?
前端·人工智能·aigc
codeking9 分钟前
3 步把 AI 桌面自动化从失控拉回可用
javascript·架构
神明不懂浪漫16 分钟前
【第三章】CSS(一)——基础选择器、CSS的属性
前端·css·html·css3
IVEN_24 分钟前
本地正常,Docker 怎么就空白:Next.js SSR 的 Alpine musl DNS 陷阱
前端·docker·next.js
凡人叶枫24 分钟前
Effective C++ 条款24:若所有参数皆须要类型转换,请为此采用 non-member 函数
linux·前端·c++·算法·嵌入式开发
用户8876654266326 分钟前
Web3 前端实时通信如何落地:从 SSE 订阅到行情、订单与账户状态更新
前端·react.js·web3