将jquery轮播图修改为vue轮播图
修改时有几个坑需要注意：
jq和vue的事件绑定会有冲突，需要将jq的事件绑定修改为在html元素上使用v-onjq绑定事件时，可以将同类名的所有元素都一起绑定，例如：$(‘little_img’).click(function(){}),function里面可以使用$(this)来获取当前元素。vue在绑定事件时，是在html元素上绑定，要获取当前元素需要使用function($event),例如：<a @mouseover=”switchImg($event)”>标签</a> ，要获取当前元素，需要在js里使用e.target或者e.currentTarget(target和currentTarget的区别是: target:触发事件的元素。currentTarget:事件绑定的元素。 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了),这种情况下需要使用e.currentTarget。获取所有元素时，只能使用$(‘元素选择器’)jq使用show()和hide()方法时，和vue使用v-show的原理是一样的，所以可以先在元素上使用v-show()，然后在js使用$().hide(),来更换元素的显示或者隐藏效果定时器在使用时，传递方法时不要加括号，例如：定时器在轮播图使用时，要在页面渲染完之后调用，在鼠标悬停在图片上时清除定时器，在鼠标离开图片时再创建定时器。但在是vue中，没有鼠标悬停的方法，我们可以使用@mouseenter,@mouseleave在引用变量时，要放在data中
原代码：
修改后代码：
这里使用的是ajax访问数据库获得的数据，与上面的代码不同，请各位自行准备数据测试
本文来自吃鸡只用平底锅投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/495742.html
微信扫一扫 
