vue实现跑马灯效果
vue实现跑马灯效果为阿中哥哥应援
1、效果图
2、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<!-- 引入vue.js-->
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show">应援</button>
<button @click="stop">暂停</button>
<h3 v-text="message"></h3>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"阿中阿中勇敢飞，中华儿女永相随~~~",
timer:null //在data上定义定时器timer，默认为null
},
methods:{
show(){
if(this.timer != null) return;
this.timer = setInterval(() => {
//获取到头的第一个字符
let start = this.message.substring(0,1);
//获取到后面的所有字符
let end = this.message.substring(1);
//重新拼接得到新的字符串，并赋值给this.message
this.message = end + start;
},300)
},
stop(){
//清除定时器
clearInterval(this.timer)
//清除定时器之后，需要重新将定时器置为null
this.timer = null
}
}
})
</script>
</body>
</html>
vue实现跑马灯效果的更多相关文章
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- 使用Vue做出跑马灯效果
<div id="pmd"> <h4> {{msg}}</h4> <input type="b ...
- vue文字跑马灯效果
https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...
- Vue学习笔记四：跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- vue学习第二天：Vue跑马灯效果制作
分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
随机推荐
- charles 结构体
本文参考:charles 结构体 Charles 主要提供两种查看封包的视图,分别名为 Structure/结构视图 Sequence/序列视图 Structure/结构视图 将网络请求按访问的域名分 ...
- linux文件系统分区、格式化、挂载、卷标挂载、永久挂载
思想不放松你的行为就不会放松,你的行为放松了,说明你的思想放松了.
- C#基础知识总结（二）--泛型
什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一个是处理string数据,或者其他自定义的数据类型,但我们没有办法,只能分别写多个方法处理每个数据类型,因为 ...
- 11-常用SQL总结
1.设置表的列不能为nullalter table run.dbo.T1 alter column Col1 int not null 2.给表添加主键alter table run.dbo.T1 a ...
- 从壹开始学习 NetCore 新篇章 ║ Blog.Core 开发社之招募计划书
宫 哈喽大家好,国庆马上就要来了,在新的第四季度来临之际,祝大家年末能顺顺利利,解决所有的难题.大家可能从我的标题里也能看的出来,老张又要耍花样,搞事情了,近来随着 netcore 3.0 的正式推出 ...
- Spring 梳理 - 开启并配置 Spring MVC 的方法
传统web.xm中配置两个上下文+两个context对应的xml+两个上下文bean分别手动配置 传统web.xm中配置两个上下文+两个context对应的xml+<mvc:annotation ...
- 读《深入理解Elasticsearch》点滴-Elastic HQ监控工具
1.多节点监控 2.类似war功能部署,tomcat即可使用 3.免费 4.ElasticHQ supports all major version of Elasticsearch from ver ...
- MongoDB 学习笔记之 $push,$each,$slice组合使用
$push使用: 使用$push给数组添加2个新成员 db.ArrayTest.updateOne({ "name" : "Bill"},{$push: {&q ...
- 你真的懂Spring Java Config 吗？Full @Configuration vs lite @Bean mode
Full @Configuration和lite @Bean mode 是 Spring Java Config 中两个非常有意思的概念. 先来看一下官方文档关于这两者的相关内容: The @Bean ...
- logback颜色
官网日志连接:https://logback.qos.ch/manual/layouts.html#coloring 举例 logging.pattern.console=%red(%d{yyyy-M ...