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>
相关推荐
隐含10 分钟前
webpack打包,把png,jpg等文件按照在src目录结构下的存储方式打包出来。解决同一命名的图片资源在打包之后,重复命名的图片就剩下一个图片了。
前端·webpack·node.js
lightYouUp20 分钟前
windows系统中下载好node无法使用npm
前端·npm·node.js
Dontla21 分钟前
npm cross-env工具包介绍(跨平台环境变量设置工具)
前端·npm·node.js
小妖66624 分钟前
vue2 切换主题色以及单页面好使方法
前端·vue.js·elementui
胡桃夹夹子29 分钟前
【前端优化】vue2 webpack4项目升级webpack5,大大提升运行速度
前端·javascript·vue.js·webpack·性能优化
Stringzhua34 分钟前
JavaScript【7】BOM模型
开发语言·前端·javascript
DT——43 分钟前
ECMAScript 2018(ES2018):异步编程与正则表达式的深度进化
开发语言·javascript·ecmascript
阿幸软件杂货间1 小时前
谷歌浏览器(Google Chrome)136.0.7103.93便携增强版|Win中文|安装教程
前端·chrome
双叶8361 小时前
(C语言)超市管理系统 (正式版)(指针)(数据结构)(清屏操作)(文件读写)(网页版预告)(html)(js)(json)
c语言·javascript·数据结构·html·json
繁依Fanyi1 小时前
Animaster:一次由 CodeBuddy 主导的 CSS 动画编辑器诞生记
android·前端·css·编辑器·codebuddy首席试玩官