Vue 文字跑马灯效果

一时失言乱红尘 2022-04-21 23:45 427阅读 0赞

## 1. 话不多说 看代码 ##

![在这里插入图片描述][20181031204818845.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue-2.5.17.js"></script>
      
    
    
    </head>
    <body>
    
    <div id="app">
    
       <input type="button" value="开始" v-bind:disabled=isDisabl @click="start">
        <input type="button" value="结束" @click="stop">
        <br>
        {
       {good}}
    
    </div>
    <script> new Vue({ el: "#app", data: { good: "好好学习，天天向上！！！", interval: null, isDisabl:false }, methods: { start() { console.log(this.good); var _this = this; _this.interval = setInterval(function () { //获取第一个字符 var start = _this.good.substring(0, 1); //得到后面的字符 var end = _this.good.substring(1); _this.isDisabl=true; //重新赋值 _this.good = end + start; }, 400) }, stop: function () { //停止计时器 this.isDisabl=false; clearInterval(this.interval); } } }) </script>
    
    </body>
    </html>

[20181031204818845.png]: /images/20220422/381f7c2f4deb4dd19b92222228e726ff.png

发表评论取消回复

表情：

评论列表（有 0 条评论，427人围观）

还没有评论，来说两句吧...

相关阅读

相关用VUE实现跑马灯效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2023年11月04日 07:48/ 0 赞/ 259 阅读

相关 java实现文字跑马灯_Android 中TextView中跑马灯效果的实现方法

条件： 1、android:ellipsize=”marquee” 2、TextView必须单行显示，即内容必须超出TextView大小 3、TextView要获得焦点才

╰半夏微凉°/ 2022年11月06日 10:48/ 0 赞/ 246 阅读

相关 TextView实现跑马灯效果

下面是布局代码，需要注意的是设置singleLine属性、ellipsize属性、focusable属性和focusableInTouchMode属性 <TextVi

冷不防/ 2022年08月14日 05:40/ 0 赞/ 250 阅读

相关 iOS 跑马灯效果

做项目的项目的时候，用到了标题滚动的效果（银行，商铺门面上悬挂的电子屏幕滚动信息),找了一下。写出来分享给大家 1.首先下载这个类文件[下载地址][Link 1]

野性酷女/ 2022年08月13日 18:39/ 0 赞/ 244 阅读

相关 Android 设置跑马灯效果

设置跑马灯效果相关属性： 1、\单行显示 [Android][]:singleLine="true" 2、\跑马灯效果设置 android:ellipsize="

た入场券/ 2022年07月13日 13:19/ 0 赞/ 441 阅读

相关 Android——TextView跑马灯效果

Android系统中TextView实现跑马灯效果，必须具备以下几个条件： 1、android:ellipsize=”marquee” 2、TextView必须单行显示，即

水深无声/ 2022年05月23日 08:38/ 0 赞/ 542 阅读

相关 Vue 文字跑马灯效果

1. 话不多说看代码 ![在这里插入图片描述][20181031204818845.png] <!DOCTYPE html> <html lang="

一时失言乱红尘/ 2022年04月21日 23:45/ 0 赞/ 428 阅读

相关 vue实现跑马灯效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

深碍√TFBOYSˉ_/ 2022年04月18日 06:23/ 0 赞/ 512 阅读

相关 Vue教程02(跑马灯效果案例)

前面的文章我们介绍了v-on这个指令，可以用来实现事件的绑定，本文我们利用v-on来实现一个简单的跑马灯效果,就是如下这种效果 ![在这里插入图片描述][20190706

不念不忘少年蓝@/ 2021年12月14日 07:29/ 0 赞/ 406 阅读

相关 Vue学习之跑马灯效果

一个简单的跑马灯效果,就是如下这种效果 ![在这里插入图片描述][20190706113831829.gif] Vue跑马灯效果 1.分析 a.点击"加油

亦凉/ 2021年12月03日 05:37/ 0 赞/ 314 阅读