Vue实现跑马灯效果

最新推荐文章于 2024-08-22 02:07:07 发布
最新推荐文章于 2024-08-22 02:07:07 发布
阅读量2.1k 收藏 3
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45497246/article/details/104902690
版权
本文介绍了如何使用Vue.js实现跑马灯效果，包括为按钮绑定点击事件，利用substring方法截取字符串并在定时器中实现自动循环，以及在Vue实例中访问data和methods的方法。
摘要由CSDN通过智能技术生成

实现跑马灯效果的分析：

  1. 给按钮绑定 点击事件 用v-on 或者@
  2. 在按钮的事件处理函数中 写相关业务逻辑代码：
    拿到msg字符串，调用substring进行字符串的截取操作（截取第一个放到最后位置）
  3. 为了实现“跑起来”的效果，也就是自动循环截取功能，需把步骤2放到定时器

步骤：

  1. 导入vue包
  2. 创建控制区域
  3. 定义vue实例

注意：

  1. 在vue实例中，需通过this.属性/方法名，才能访问data的数据和methods的方法
  2. vm实例会监听data中的数据变化并同步到html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv
最低0.47元/天 解锁文章
是Ryan吖
关注
专栏目录
vue实现文字跑马灯效果
12-04
使用 vue 绑定style属性实现文字跑马灯效果。。。。。。。
vue实现跑马灯效果
lgl111ok的博客
10-28 326
vue实现跑马灯效果 原文链接：https://www.cnblogs.com/zhahuhu/p/11592400.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯</title> <!-...
Vue3 走马灯Vue3Marquee组件库的使用 文字走马灯 公告栏
最新发布
生产队的驴
08-22 672
Vue3Marquee 是一个用于在 Vue 3 项目中创建跑马灯（Marquee）效果的组件库，常见于网站的公告，如文字太长可以考虑使用该组件让文字进行滚动，当然不止是文字 元素也可以。项目地址。
用VUE实现跑马灯效果
ThinkPet
01-28 968
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
利用vue做出简易的跑马灯效果
stphencurry的博客
03-21 243
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <button @click="active">滚动</button> <button @click="pause">停止</butt
【vue】vue实现跑马灯效果
zhangankang的博客
10-12 3505
使用两个方法： 1、JavaScript substring() 方法 定义和用法 substring() 方法用于提取字符串中介于两个指定下标之间的字符。 语法 stringObject.substring(start,stop) 参数 描述 start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 stop ...
Js和VUE实现跑马灯效果
10-15
Vue 实现跑马灯效果 在前端开发中，跑马灯（Carousel）是一种常见的动态展示内容的方式，通常用于滚动显示新闻、广告或者一系列项目。在 Js 和 Vue 中，我们可以使用不同的方法来实现这一效果。本篇文章将详细介绍...
vue结合css实现的跑马灯组件
07-22
上下左右方向皆可跑，无抖动现象，性能好。
Vue3走马灯（Carousel）
Mr Dear的博客
04-04 7126
走马灯图片轮播组件，常用于一组图片或卡片轮播，支持：箭头导航；显示指示点；自动轮播；设置分页指示点位置；垂直切换；移入暂停；自定义过渡效果；自定义滑动动画；自定义样式；总之，功能丰富，简单易用😁😁
【Vue案例一】实现跑马灯效果
jingjing的博客
08-27 966
在Vue学习笔记（一）中我们已经学过了 v-on 这个指令，可以用来实现事件的绑定，本文我们利用 v-on 来实现一个简单的跑马灯效果，就是如下这种效果： 第一步：导入Vue包 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> 第二步：创建一个要控制的区域 <div id="app"> <button>开始</button>
Vue实现简单的跑马灯
10-15
主要为大家详细介绍了Vue实现简单的跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue（三）、跑马灯效果
yangxshn的博客
11-13 417
Vue实现跑马灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
Vue 循环走马灯
成长的点滴
12-07 692
Vue 循环走马灯
使用Vue实现跑马灯效果
gonghui_hui的博客
10-17 290
vue.js学习之跑马灯效果 <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="./lib/vue.js"></script> <body
vue实现跑马灯的效果
qq_40039641的博客
05-11 1240
div.test1(ref="test1") p.test(ref="test") 跑马灯，跑起来，嗨起来~~hello world 你好世界 世界你好哇 test () { let boxWidth = this.$refs.test1.offsetWidth let testWidth = this.$refs.test.scrollWidth if (testWidth > boxWidth) { this.testTimer = setInterval(() =.
Vue实现跑马灯
qq_38318589的博客
10-11 507
Vue实现滚动字条；Vue实现跑马灯
【Vue学习】Vue实践-实现跑马灯效果
乌药ice
09-11 305
实现思路 定义一个字符串，不断截取第一个字符和剩下的字符，把第一个字符加载到剩下字符的末尾，使用定时器每隔一段时间重复执行即可。 例如：123456 第一次截取1 23456 第一次合并23456 1 第二次截取2 34561 第二次合并34561 2 ............... 不断重复................. 基于这个想法，我们先实现点击“跑起来”，执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值