vue实现循环跑马灯效果,vue文字滚动跑马灯
本文主要详细介绍了Vue实现简单跑马灯的效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue实现跑马灯效果的具体代码，供大家参考。具体内容如下
一个简单的跑马灯效果如下。
Vue跑马灯效果：
1.分析
A.点击“来吧”按钮绑定点击事件，使用v-on或缩写： @
b、在按钮的事件处理函数中，编写相关的业务逻辑代码：获取msg字符串，然后调用字符串的substring来截取字符串，截取第一个字符放在最后一个位置；
为了实现点击按钮自动拦截的功能，需要将步骤2中的代码放入一个定时器中；
2.实现
2.1、绑定事件
Type= button value=加油 @click=lang
Type= button value=低调 @click=停止
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
味精：加油，萧蔷，你是最棒的~ ~！,
无效：null//在数据上定义计时器Id
},
方法：{
lang() {
},
stop() {
}
}
})
/脚本
2.2.动态拦截和计时
var vm=new Vue({
埃尔： #app ，
数据：{
味精：加油，萧蔷，你是最棒的~ ~！,
无效：null//在数据上定义计时器Id
},
方法：{
lang() {
//获取头的第一个字符
//这个
if (this.intervalId！=null)返回；
this . intervalid=setInterval(()={
var start=this.msg.substring(0，1)
//获取以下所有字符
var end=this.msg.substring(1)
//重新拼接得到新的字符串，赋给this.msg
this.msg=结束开始
}, 400)
//注意：VM实例会监控自身数据中的所有数据变化，只要数据一变化，就会自动将最新的数据从数据同步到页面；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
},
stop() {
}
}
})
2.3.取消计时器。
stop() {
//停止计时器
clear interval(this . interval)
//每当定时器清零时，intervalId都需要复位为null。
this.intervalId=null
}
2.4.完全码
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题文档/标题
！-1.导入Vue包-
脚本src=。/lib/vue-2.4.0.js/script
/头
身体
！-2.创建一个被控制的区域-
div id=应用程序
Type= button value=加油 @click=lang
Type= button value=低调 @click=停止
h4{{ msg }}/h4
/div
脚本
//分析：
//1.给出[Wave Up]按钮并绑定一个点击事件v-on @
//2.在按钮的事件处理函数中编写相关的业务逻辑代码：获取msg字符串，然后调用字符串的substring来截取字符串，截取第一个字符放在最后一个位置；
//3.为了实现点击按钮自动拦截的功能，需要将步骤2中的代码放入一个定时器中；
//注意：在一个VM实例中，如果你想获得数据上的数据或者调用方法中的方法，你必须通过这个来访问它。数据属性名或this。方法名，这意味着我们新创建的VM实例对象。
var vm=new Vue({
埃尔： #app ，
数据：{
味精：加油，萧蔷，你是最棒的~ ~！,
无效：null//在数据上定义计时器Id
},
方法：{
lang() {
//console.log(this.msg)
//获取头的第一个字符
//这个
if (this.intervalId！=null)返回；
this . intervalid=setInterval(()={
var start=this.msg.substring(0，1)
//获取以下所有字符
var end=this.msg.substring(1)
//重新拼接得到新的字符串，赋给this.msg
this.msg=结束开始
}, 400)
//注意：VM实例会监控自身数据中的所有数据变化，只要数据一变化，就会自动将最新的数据从数据同步到页面；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
},
Stop() {//停止计时器
clear interval(this . interval)
//每当定时器清零时，intervalId都需要复位为null。
this.intervalId=null
}
}
})
/脚本
/body
/html
最终效果
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。