vue图片切换软件(Vue实现简单图片切换效果)
类别:编程学习 浏览量:2570
时间:2021-10-24 10:56:28 vue图片切换软件
Vue实现简单图片切换效果本文实例为大家分享了Vue实现简单图片切换的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #app{ position: absolute; width: 100px; height: 100px; top: 100px; left: 400px; } #left{ position: relative; top:-240px; left: -45px; font-size: 50px; } #right{ position: relative; top: -300px; left: 595px; font-size: 50px; } a{ color: black; text-decoration: none; } </style> </head> <body> <li id="app"> <!-- 要轮询的图片 --> <img :src="imgArr[index]"/> <!-- 左箭头 --> <a href="javascript:void(0)" id="left" @click="prev" v-show="index!=0">《</a> <!-- 右箭头 --> <a href="javascript:void(0)" id="right" @click="next" v-show="index<imgArr.length-1">》</a> </li> <script> var app = new Vue({ el: "#app", data: { imgArr:[ "img/1.jpg" alt="vue图片切换软件(Vue实现简单图片切换效果)" border="0" />
总结:
- 列表数据使用数组保存;
- v-bind指令可以设置元素属性,如src ;
- v-show和v-if都可以切换元素的显示状态,但频繁切换推荐使用v-show
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue官网编辑器主题(vue实现主题切换的多种思路分享)
- vue项目的一些手动配置(使用vue项目配置多个代理的注意点)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- springboot+vue项目演示(springboot+VUE实现登录注册)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- vue是怎样进行页面跳转(Vue实现登陆跳转)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
热门推荐
- css样式词大全(超全面CSS样式整理)
- php开发pdo事务处理(Cpanel下Cron Jobs定时执行PHP的方法)
- 个人对云服务器ecs的理解(ecs云服务器怎么搭建网站)
- nginx负载均衡器的作用(Nginx 负载均衡是什么以及该如何配置)
- django请求流程(Django学习笔记之为Model添加Action)
- sqlserver数据库备份还原(sqlserver数据库高版本备份还原为低版本的方法)
- mybatis 一对多条件查询(mybatis collection 多条件查询的实现方法)
- sql server使用手册(SQL Server连接查询的实用教程)
- HTML5 audio标签
- 数组、ArrayList和List的区别
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9