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>
相关推荐
小潘同学2 分钟前
Vue3中响应式数据深度拷贝 Avoid app logic that relies on,,,,,,,,
前端
六六Leon4 分钟前
Kuikly跨端模式接入资源管理
前端
tianchang7 分钟前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
旺仔牛仔QQ糖8 分钟前
Vue3.0 Hook 使用好用多多
前端
~无忧花开~25 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D32 分钟前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠41 分钟前
AJAX的学习
前端·学习·ajax
JNU freshman1 小时前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼1 小时前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
落一落,掉一掉1 小时前
第十二周 waf绕过和前端加密绕过
前端