vue--实现跑马灯效果

<div id="app"><input type="button" value="开始" @click="lang"><input type="button" value="挺" @click="clear"><p>{{msg}}</p></div>

 <script>var vm = new Vue({el: "#app",data: {msg: "我哈你丹江口安居客耙齿菌",id: null,},methods: {lang: function () {if (!this.id) {//值为true指向下面这一段代码this.id=setInterval(() => { var start = this.msg.substring(0, 1);var end = this.msg.substring(1);this.msg = end + start; //是最后一段拼接上前面的一段//当开启定时器后 id就改变为了2哦console.log(this.id) //2}, 400);} else {}},clear: function () {clearInterval(this.id);  //清除定时器后  id仍然为2console.log("清除前id为"+this.id);this.id=null;}},})</script>

转载于:https://www.cnblogs.com/IwishIcould/p/10872602.html

vue--实现跑马灯效果相关推荐

黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
【Vue案例一】实现跑马灯效果
在Vue学习笔记(一)中我们已经学过了 v-on 这个指令,可以用来实现事件的绑定,本文我们利用 v-on 来实现一个简单的跑马灯效果,就是如下这种效果: 第一步:导入Vue包 <script ...
【前端框架学习】第一次实验跑马灯效果的制作
一.什么是跑马灯效果每隔一段时间,排在首位的字符会被后一个字符所代替,而首位字符会被移到队尾. 二.实验过程 1.首先创建控制区域与vue实例: <div id="app" ...
HarmonyOS 实现跑马灯效果
跑马灯效果实现效果图注意事项: HarmonyOS里面Text由于multiple_lines默认为false 所以我们可以直接来设置跑马灯效果,当想设置Text换行的时候设置multiple_li ...
Android 使用 ellipsize 实现文字横向移动效果(跑马灯效果)
实现的效果图如下 ellipsize 可以设置跑马灯效果具体代码设置如下 <TextViewandroid:layout_width="match_parent"andro ...
TextView实现跑马灯效果
经常使用TextView会出现这样的情况,有限的空间内只能写一行,然后导致好多文字被"..."表示了,如图: 而且有可能是重要信息被隐藏了,于是就有了跑马灯效果. 实现方式很简单: ...
单行文字垂直/水平跑马灯效果
需求描述接到的需求是这样的:跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出. 静态效果如下图,文字从下往上或者从右往左滚动,滚动到此位置时停留一秒(不会传动图... 网络上有 ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...

vue--实现跑马灯效果

vue--实现跑马灯效果相关推荐

最新文章

热门文章