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>
相关推荐
zoahxmy0929几秒前
Vue3 视频播放与截图功能实现
javascript·vue.js
婷婷婷婷3 分钟前
v-copyText 自定义指令 —— 复制文本内容
前端
waylon111135 分钟前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
阳阳羊6 分钟前
Mpx 动画
前端
编程社区管理员6 分钟前
「2025最新版React+Ant Design+Router+TailwindCss全栈攻略:从零到实战,打造高颜值企业级应用
前端·react.js·前端框架
DJA_CR6 分钟前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
前端爆冲17 分钟前
项目中无用export的检测方案
前端
小旋风0123423 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
旧味清欢|27 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾1 小时前
sqli-labs靶场 less 8
前端·数据库·less