当前位置: 首页 > news >正文

vue实现图片分页

本小节学会使用v-show@clickv-bindv-bind可以简写为:

<!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>
http://www.lryc.cn/news/211618.html

相关文章:

  • Baklib专注:企业数字内容体验与知识管理
  • C++ 标准库随机数:std::default_random_engine
  • Python requests之Cookie
  • 【嵌入式项目应用】__嵌入式中,映射表的应用例子!
  • react中的useState和useImmer的用法
  • Can‘t compile code “launch: program <program_path> does not exist “
  • Mac电脑上升级nodejs
  • 基于单片机的太阳跟踪系统的设计
  • V3Det大规模词汇视觉检测数据集与LaRS海上全景障碍物检测数据集
  • ubuntu(18.04) 安装 blast
  • 3.2每日一题(定积分求抽水做工问题)
  • c语言基础:L1-063 吃鱼还是吃肉
  • <if> 标签中使用了不正确的语法。在 XML 中,<if> 标签不需要使用 <![CDATA[ ... ]]> 将条件语句包装起来。 否则会报错
  • Ubuntu 诞生 19 年
  • JVM进阶(3)
  • Qt QWidget、QDialog、QMainWindow的区别
  • 软考 系统架构设计师系列知识点之设计模式(10)
  • 【python爬虫】设计自己的爬虫 1. request封装
  • 8.0 新特性 - innodb_ddl_threads
  • pgAdmin 4 v7.8 发布,PostgreSQL 开源图形化管理工具
  • Realrek 2.5G交换机 8+1万兆光RTL8373-VB-CG方案简介
  • Linux命令随笔
  • 最新版scene-builder安装
  • 直击电商商城内核!一站式解决方案
  • rabbitmq安装、基本使用
  • Amaon CloudFront助力出海业务访问优化
  • python实现ModBusRTU服务端
  • yum安装node,npm
  • ESM蛋白质语言模型系列
  • RHCE-------Day1