vue中轮播图的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> <div id="app">
<!--视图-->
<img :src="data:images[currentIndex].imgSrc" alt="" @click="imgHandler">
<br>
<button @click="prevHandler">上一张</button>
<button @click="nextHandler">下一张</button>
</div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src='./vue.js'></script>
<script>
let vm = new Vue({ // 声明变量 实例化一个对象vm(指的是vue的实例)
el:"#app", //绑定根元素
data(){
return{
images:[ //数据
{id:1,imgSrc:"img/1.jpg"},
{id:2,imgSrc:"img/2.jpg"},
{id:3,imgSrc:"img/3.jpg"},
// {id:4,imgSrc:"img/4.jpg"},
],
currentIndex:0 //一开始设置为 0
}
},
methods:{// 对象内容是js函数 nextHandler(e){
console.log(e);
this.currentIndex++;
//更改图片地址
if (this.currentIndex == 3){ //js的if判断语句
this.currentIndex = 0;
}
}, prevHandler(e) {
console.log(e);
this.currentIndex--;
//更改图片地址
if (this.currentIndex == 0) { //js的if判断语句
this.currentIndex = 3;
}
}, imgHandler(e){ //每一个事件都有一个event对象, 冒泡阻止默认事件学的
console.log(e.target);//当前目标对象 <img src="img/1.jpg" alt>
console.log(this); //实例化里面的对象this 指的都是当前实例化对象
}
}, //create() 组件创建完成, 组件创建完成立马往后台发ajax
// ajax vue的钩子函数
// created(){
// // console.log(this); //就是当前的vm
// setInterval(function(){
// console.log(this);//this是window对象 但是想把this的指向改成vm 所以把匿名函数改成箭头函数
// },1000)
// } created(){
// this的指向问题 ************* 能用箭头函数不用匿名函数
//匿名函数改成箭头函数 this代指vue
setInterval( ()=>{
console.log(this);//this是 vue 对象
},1000)//自动循环播放图片 1秒播放一次
}
}) </script> </body>
</html>
vue中轮播图的实现的更多相关文章
- Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
- vue+mui轮播图
mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...
- vue自定义轮播图组件 swiper
1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...
- vue-cli中轮播图vue-awesome-swiper使用方法
1 npm 安装 npm install vue-awesome-swiper --save 2在所用的组件中引入 import 'swiper/dist/css/swiper.css' import ...
- iOS中 轮播图放哪最合适? 技术分享
我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICol ...
- vue项目轮播图的实现
利用 Vue-Awesome-Swiper插件来做轮播效果,github地址:https://github.com/surmon-china/vue-awesome-swiper 安装 npm i ...
- vue简易轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue实现轮播图
/* Start 基本样式*/ * { margin: 0; padding: 0; } ul { list-style-type: none; } body { font-size ...
随机推荐
- You don't have permission to access / on this server问题的解决.
vhosts.conf配置文件中虚拟主机的配置如下,Options Indexes FollowSymLinks 后面添加 ExecCGI <VirtualHost 192.168.10.82: ...
- Android adb shell 无法启动:insufficient permissions for device
解决办法1:lsusb查看vendorId号,然后在/etc/udev/rules.d/目录下增加(或修改)51-android.rules文件.增加一条记录:SUBSYSTEM=="usb ...
- Win8Metro(C#)数字图像处理--2.29图像除法运算
原文:Win8Metro(C#)数字图像处理--2.29图像除法运算 [函数名称] 图像除法函数DivisionProcess(WriteableBitmap src, WriteableBit ...
- WinForm 清空界面控件值的小技巧
原文:WinForm 清空界面控件值的小技巧 在WinForm里面有时候需要清空自己输入内容或是选择的选项,以便重新操作流程,那么一般你是怎么清空界面各个控件值的呢?如果窗体里面控件,尤其是TextB ...
- 微信小程序把玩（六）模块化
原文:微信小程序把玩(六)模块化 模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口.我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 /* ...
- shell条件测试结构
条件测试结构 if/then结构用来判断命令列表的退出状态码是否为0(因为在UNIX惯例, 0表示"成功"), 如果成功的话, 那么就执行接下来的一个或多个命令. 有一个专有命令[ ...
- C#二分查找法 破洞百出版本
二分查找法在数据繁多的数据中查找是一种快速的方法,每次查找最多需要的次数 为2的n次方小于总个数. 当然是有前提的,就是需要把数据先排好序,这里指的都是数值型的数据. 基本思想就是把需要找的值与排序好 ...
- 用C实现OOP面向对象编程（1）
如摘要所说,C语言不支持OOP(面向对象的编程).并这不意味着我们就不能对C进行面向对象的开发,只是过程要复杂许多.原来以C++的许多工作,在C语言中需我们手动去完成. 博主将与大家一起研究一下如下用 ...
- 学习Java，值得你留意的问题（1）更名为《学习Java，容易被你忽略的小细节（1）》
记得大二快要结束的时候,有个女孩子突然问我“你会Java吗,帮我做大作业好吗?” 实话说,那个女孩真的很漂亮,我当时也非常想帮她.但是我从来没有接触过Java,让我在短短的几天内完成Java程序设计课 ...
- Python字典的合并与拆分
1.字典的合并 dict1={1:[1,11,111],2:[2,22,222]} dict2={3:[3,33,333],4:[4,44,444]} dictMerged2=dict(dict1, ...