vue文字滚动跑马灯,vue数字滚动开奖效果跑马灯

　　本文主要详细介绍Vue对简单跑马灯特效的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享Vue实现简单跑马灯特效的具体代码，供大家参考。具体内容如下

效果：

　　单击按钮移动文本，单击停止按钮停止文本。

知识点：

　　Substring(字符串截取)setInterval定时器(控制文本移动速度)clearInterval清除定时器(控制文本停止)

代码展示：

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　标题/标题

　　script src= vue . js type= text/JavaScript charset= utf-8 /script

　　style type=text/css

　　#app{

　　宽度：200px

　　高度：120px

　　背景色：粉色；

　　文本对齐：居中；

　　border-bottom:1px solid # cfcc C5；

　　}

　　/风格

　　/头

　　身体

　　div id=应用程序

　　h1{{text}}/h1br

　　Button @ click= piano()乱世佳人/button nbsp；nbspnbsp

　　Button @click=ding()锚定/button

　　/div

　　脚本类型=文本/javascript

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　文本：“股票效应！”,

　　标志：空

　　},

　　方法：{

　　朴(){

　　//如果已经分配了ind，则返回

　　if(this . flag){ return }；

　　this.flag=setInterval(()={

　　//截取第一个字符

　　var head=this.text.substring(0，1)；

　　//截取除第一个字符以外的所有字符

　　var foot=this . text . substring(1)；

　　//结合在一起

　　this.text=foot head

　　},100)

　　},

　　丁(){

　　//清除计时器

　　clearInterval(this . flag)；

　　//将标志留空，否则下次单击将不会移动文本。

　　this.flag=null

　　}

　　}

　　})

　　/脚本

　　/body

　　/html

　　效果：

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。