vue vue怎么用实现类似于走马灯效果的视频

来源：蜘蛛抓取(WebSpider) 时间：2019-05-20 09:17 标签： vue怎么用

话不多说先上效果图本文引荐原博主链接 

数据中我用了一个数组来放图片的目录，

//鼠标悬停时停止移动

 因为我们只有静态的图片所以这么可以但是如果是取数据库中鈈定数量的图片就不能这么使用了 

最后我加上了css样式就可以了

版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明

使用el-carousel的时候发现默认的@click.native 定义点击事件，当点击当前图片的时候获取当前图片的activeIndex这個属性是该组件的data中的一个参数，表明当前显示的图片的index借用这个参数我们可以进行相应的页面跳转具体代码如下：
1、首先将图片的连接和要跳转的连接放到指定的集合imgs里

2、定义跳转的方法，$refs是vue的内置对象是所有的代理对象的集合

3、将该元素定义成代理，并使用@click.native定义点擊事件

vue是目前最为流行的前端框架之一学习起来也极为的简单，本章讲解vue实现跑马灯效果

  1. 1、打开Hbuilder、建立一个项目（引入vue.js的包vue的官网可直接下载）、目录结构如下

  2. msg:'实现跑马灯效果'

  3. 5、添加click事件，以及字符串拆分实现大致效果，如图

  4. 6、设置定时器、以及暂时效果

  5. 7、防止重复点击定时器

经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士

作者声明：本篇经验系本人依照真实经历原创，未经许可謝绝转载。

我要回帖

更多关于 vue怎么用 的文章

 

随机推荐