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>
相关推荐
weixin_704266056 分钟前
Spring Boot 入门了解
前端·firefox
冲浪中台9 分钟前
如何实现低代码源码级交付和私有化部署
前端·低代码·私有化部署·源代码管理
炒毛豆15 分钟前
Vue 3 公共组件从封装到全局注册的极简指南
前端·javascript·vue.js
踩着两条虫16 分钟前
VTJ.PRO 在线应用开发平台前端架构
前端·vue.js·ai编程
踩着两条虫21 分钟前
VTJ.PRO 在线应用开发平台部署与运维
前端·vue.js·人工智能
Dxy123931021621 分钟前
html鼠标定位线
前端·html·计算机外设
sp4229 分钟前
通过 RootEncoder 进行安卓直播 RTSP 推流
前端
_院长大人_30 分钟前
构建一个 Vue 基于el-input的磨损区间选择器组件 —— WearRangeSelector
前端·javascript·vue.js
遗憾随她而去.30 分钟前
前端 Vue 虚拟列表(Virtual List),从原理到实战
前端·javascript·vue.js
tangdou36909865531 分钟前
图文并茂手把手教你Claude Code 多智能体 Agent Teams,一人变团队
前端·后端·ai编程