VUE之文字跑马灯效果

1.效果演示

2.相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app"><input type="button" value="浪起来" @click="lang"><input type="button" value="低调" @click="stop"><h4>{{msg}}</h4>
</div>
<script>var vm = new Vue({el: "#app",data: {msg: "猥琐发育,别浪~~!",interval: null},methods: {lang: function () {console.log(this.msg);var _this = this;_this.interval = setInterval(function () {//获取第一个字符var start = _this.msg.substring(0, 1);//得到后面的字符var end = _this.msg.substring(1);//重新赋值_this.msg = end + start;}, 400)},stop:function () {//停止定时器clearInterval(this.interval);}}});</script>
</body>
</html>

转载于:https://www.cnblogs.com/charlypage/p/10166391.html

VUE之文字跑马灯效果相关推荐

c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
CSS实现文字跑马灯效果
CSS实现文字跑马灯效果在完成一个任务的时候,要求在表格中固定宽度的其中一个item文字过长需要滚动显示,然后经过多次效果的尝试,实现代码如下所示: 它需要一个外层包围盒,设置定宽.文字不换行以及超 ...
跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
python中的字符串详解（附实现文字跑马灯效果）
python中的字符串详解 1.什么是字符串相信大家对字符串应该是再熟悉不过了吧,因为日常生活中的一句话,或是路边的一则广告,其实它都相当于一个字符串,而顾名思义,字符串也就是一串串的由零个或多 ...
微信小程序教程：文字跑马灯效果
当你的微信小程序内容中出现文字跑马灯效果,会不会觉得很拉风,接下来大家详细讲解下如何操作实现这效果. 效果: wxml <view>1 显示完后再显示</view> <v ...
微信小程序文字跑马灯效果
1.样式 /*首页跑马灯效果开始*/ .container_marquee {display: flex;flex-direction: column;justify-content: space-b ...
html 文字跑马灯效果,CSS3 长文字跑马灯效果
raw js + css3 transition 跑马灯测试.跑马灯测试.跑马灯测试. @keyframes kf-marque-animation { 0% { transform: transla ...
android 字体跑马灯,Android中使用TextView实现文字跑马灯效果
通常情况下我们想实现文字的走马灯效果需要在xml文件中这样设置 android:layout_width="wrap_content" android:layout_height= ...
微信小程序：公告字幕滚动播放（文字跑马灯效果）
一.需求公告文字仅限200字公告内容仅限一行文字显示公告内容持续滚动二.解决思路使用动画API(Animation.translate),完成移动动画使用定时器API(setInterva ...

VUE之文字跑马灯效果

1.效果演示

2.相关代码

VUE之文字跑马灯效果相关推荐

最新文章

热门文章