vue切换图片效果(Vue.js实现图片切换功能)
类别:编程学习 浏览量:1509
时间:2021-10-21 07:23:55 vue切换图片效果
Vue.js实现图片切换功能本文实例为大家分享了Vue.js实现图片切换功能的具体代码,供大家参考,具体内容如下
实现功能如下
文件目录如下,要实现本功能只需要修改图片的存储位置即可
代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> li { margin: 0 auto; width:200px; height: 300px; border: 1px solid aqua; } img { margin: 0 auto; width: 200px; height: 250px; border: 1px solid aqua; } </style> <body> <li id="app"> <img :src="imgSrc[index]" > <button type="button" @click="prephoto()">上一张</button> <button type="button" @click="nextphoto()">下一张</button> </li> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ imgSrc:["./img/1.jpg" alt="vue切换图片效果(Vue.js实现图片切换功能)" border="0" />
适合初学者。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- 营养餐是什么(学校营养餐是什么)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
- 杯酒人生---瓦伦丁酒杯和奥丁格啤酒(杯酒人生---瓦伦丁酒杯和奥丁格啤酒)
- 中秋节买啤酒,预算超过7元试试这8种啤酒,麦香浓郁都是真啤酒(预算超过7元试试这8种啤酒)
- CellPress旗下的6 期刊,国人友刊来了解一下吧(CellPress旗下的6期刊国人友刊来了解一下吧)
- ()
热门推荐
- .NET中dynamic和var的区别
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- python中tkinter模块窗口操作(详解python tkinter教程-事件绑定)
- python使用门算法加密文件(python实现可逆简单的加密算法)
- windows下搭建docker私有仓库(使用docker compose安装harbor私有仓库的详细教程)
- mysql语句性能分析(聊聊MySQL的COUNT*的性能)
- web.config中customErrors的配置
- dedecms发布时间调整(织梦DEDECMS发布完文章没有显示文章内容解决办法)
- nginxlocation匹配参数(nginx location优先级的深入讲解)
- php生成md5(php进行md5加密简单实例方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9