专栏首页Devops专栏7. Vue 使用v-on、v-click编写跑马灯效果示例

7. Vue 使用v-on、v-click编写跑马灯效果示例

使用v-onv-click来编写一个跑马灯的效果示例。 效果示例如下:

通过两个按钮控制下面的字符串在一定的区域内循环往左滚动,形成跑马灯的效果。

实现思路

  1. 编写两个按钮 startstop,并且使用v-on进行click监听。分别绑定start_run()stop_run() 方法。
  2. start_run() 方法首先需要获取当前显示的字符串Hello world, this is funny,然后使用substring(开始截取的字符位置, 停止截取的字符位置)截取字符串,将第一个字符拼接到最后去。
  3. 设置一个定时器setInterval() 控制不断截取字符,并逐个拼接到最后,形成滚动效果。
  4. stop_run()方法则是执行停止定时器clearInterval()即可。

实现:编写两个按钮以及字符串渲染

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">

        <!-- start按钮 -->
        <input type="button" value="start" @click="start">

        <!-- stop按钮 -->
        <input type="button" value="stop" @click="stop">

        <!-- 字符串内容 -->
        <h2 v-text="msg"></h2>
    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World, this is funny!'
            },
            methods:{
                start(){
                    alert("start");
                },
                stop(){
                    alert("stop");
                }
            }

        })
    </script>

</body>
</html>

浏览器显示如下:

编写start_run()实现字符串截取以及颠倒拼接

多次点击start按钮,显示如下:

编写start_run()增加setInterval()定时截取字符串

在浏览器执行一下,发现报错,如下:

在这里提示substring方法未定义,其实这是一个this指针的问题。因为当将截取字符串的操作方法放入定时器的function()中,那么此时this指针则是指向function,而function()并没有定时msg,由于找不到msg,进而提示找不到substring方法。

解决这个问题可以使用箭头函数=>,将外部的this指针赋值给function()方法中。

如下:

测试打开浏览器显示如下:

编写stop_run()方法,停止定时器

如果要停止定时器,那么就要记录定时器的id信息,用于停止。那么这个定时器的id就需要是一个全局变量,提供stop_run()start_run()方法都可以访问到。

浏览器点击start按钮之后,再点击stop按钮,停止运行,如下:

但是这里其实有个BUG,如果多次点击start按钮,那么将会创建多个定时器,而记录定时器id只会记录最后一个创建的定时器,那么则无法全部停止。

那么这时候就要做一些判断来限制启动定时器,并且关闭定时器之后,需要重置一下定时器id为null。

解决多次点击start按钮的BUG

此时无论点击多少次start按钮,只要点击一次stop按钮就可以停止定时器了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 多线程 - 共享变量

    从上面两个线程执行的结果来看,线程t1将 g_num 加到 103,在线程t2也是打印g_num=103。所以对于两个线程,g_num这个全局变量是共享的。

    Devops海洋的渔夫
  • Redis 数据结构之hash类型

    Devops海洋的渔夫
  • Django 2.1.7 视图 - HttpReqeust对象、QueryDict对象

    Django 2.1.7 视图 Django 2.1.7 MVT模型示例 - 查询数据,返回渲染模板数据 Django 2.1.7 视图 - 自定义404错...

    Devops海洋的渔夫
  • avast:中兴手机预装恶意软件 嵌入固件底层

    著名安全机构 avast 发布报告称,旗下安全威胁实验室发现,中兴、爱可视、MyPhone 等厂商的多款安卓手机居然预装了恶意广告软件。该恶意软件被命名为“ C...

    周俊辉
  • avast:中兴手机预装恶意软件 嵌入固件底层

    著名安全机构 avast 发布报告称,旗下安全威胁实验室发现,中兴、爱可视、MyPhone 等厂商的多款安卓手机居然预装了恶意广告软件。该恶意软件被命名为“ C...

    伍尚国
  • mybatis 学习笔记(三):mapper 代理开发 dao 层

    通过使用mapper 代理,我们可以不需要去编写具体的实现类(使用 getMapper() 方法自动生成),只需编写接口即可,简化了原始 dao 开发的流程。

    希希里之海
  • 供应链安全系列-攻击编译阶段(一)

    让我们再次回顾下安全从业人员为了努力做好软件安全,在运营阶段做了什么事情。

    Ramos
  • 算法从0到1之trie(字典树)的增删改查(递归与非递归实现)

    Trie树,又称单词查找树或键树,是一种树形结构。典型应用是用于统计和排序大量的字符串(但不仅限于字符串)。Trie的核心思想是空间换时间。利用字符串的公共前缀...

    公众号guangcity
  • 看我如何下载Ebay日本(www.ebay.co.jp)的网站源码

    笔者最近在对Alexa排名靠前的大公司网站做了一些安全测试,其中网站错误配置漏洞时有发现,这种问题往往不需要高深复杂的漏洞利用,但却能对网站业务产生严重影响,在...

    FB客服
  • sublime text3 注册码

    这里提供sublime text Build 3207 x64 Setup 下载,这是原版,本站未做任何修改。

    无道

扫码关注云+社区

领取腾讯云代金券