首先根据vue的基础框架搭建出需要呈现的文件(将需要进行跑马灯操作的程序进行文字呈现)

程序分析:

1. 给 【触发】 按钮,绑定一个点击事件   v-on 

2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;

3. 为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定时器中去;

tips:

1. 如何定义一个基本的Vue代码结构

2. 插值表达式 和  v-text

3. v-cloak

4. v-html 

5. v-bind   Vue提供的属性绑定机制   缩写是 :

 6. v-on     Vue提供的事件绑定机制   缩写是 @ 

1、创建html例程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、先导入vue包 <script src="./lib/vue-2.4.0.js"></script>

<script src="./lib/vue-2.4.0.js"></script>    <!--导入Vue包-->

3、创建一个Vue例程

1、substring()函数

start:substring(0,1) --> 第零个字符到第一个字符

stop:substring(1) --> 第一个字符到结尾

跑马灯效果触发:将第一个字符赋值到最后一个字符

    var vm = new Vue({
        el:'#app',// VM实例名称
        data:{// 数据属性
            msg:'天下熙熙,皆为利来;天下攘攘,皆为利往',
        },
        methods:{// 方法属性
            begin() {
                console.log(this.msg)
                // 获取到头的第一个字符/
                var start = this.msg.substring(0,1)
                // 获取到后面的所有字符串
                var end = this.msg.substring(1)
                // 对this.msg重新赋值
                this.msg = end + start

            }
        }
    })

2、 setInterval()函数

调用定时器函数setInterval(() => {事件},时间)

重置定时器clearInterval(触发状态)

设置跑马灯定时器

1:状态定义参数 -- intervalId: null

2:状态参数监测,避免二次触发 -- begin(){ if (this.intervalId != null) return; }

3:状态参数重置,使跑马灯可重新触发 -- stop(){ this.intervalId = null; } 

var vm = new Vue({
        el:'#app',// VM实例名称
        data:{// 数据属性
            msg:'天下熙熙,皆为利来;天下攘攘,皆为利往',
            msg2:'点我开始',
            msg3:'点我停止',
            // 定义触发状态
            intervalId: null 
        },
        methods:{// 方法属性
            begin() {

                // 跑马灯运行状态监测,避免重复出发跑马灯效果
                if (this.intervalId != null) return;

                //调用定时器函数setInterval(() => {事件},时间)
                this.intervalId = setInterval(() =>{
                                    // console.log(this.msg)
                // 获取到头的第一个字符/
                var start = this.msg.substring(0,1)
                // 获取到后面的所有字符串
                var end = this.msg.substring(1)
                // 对this.msg重新赋值
                this.msg = end + start
                }, 400)

            },
            stop() {
                // 重置定时器clearInterval(触发状态)
                clearInterval(this.intervalId)
                // 跑马灯状态重置
                this.intervalId = null;
            }
        }
    })

源代码 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>    <!--导入Vue包-->
</head>
<body>

    <!-- 控制区 -->
    <div id="app">

        <!-- 定于输出框 -->
        <h4>{{msg}}</h4>
        <!-- 定义开始按键 input type='类型' value='名称' :title="悬停显示内容" @click="点击后发生的事件" -->
        <input type="button" value="开始" :title="msg2" @click="begin">
        <!-- 定义结束案件 -->
        <input type="button" value="结束" :title="msg3" @click="stop">

    </div>


    <!-- 定义vue内app例程 -->
<script>
    var vm = new Vue({
        el:'#app',// VM实例名称
        data:{// 数据属性
            msg:'天下熙熙,皆为利来;天下攘攘,皆为利往',
            msg2:'点我开始',
            msg3:'点我停止',
            // 定义触发状态
            intervalId: null 
        },
        methods:{// 方法属性
            begin() {

                // 跑马灯运行状态监测,避免重复出发跑马灯效果
                if (this.intervalId != null) return;

                //调用定时器函数setInterval(() => {事件},时间)
                this.intervalId = setInterval(() =>{
                                    // console.log(this.msg)
                // 获取到头的第一个字符/
                var start = this.msg.substring(0,1)
                // 获取到后面的所有字符串
                var end = this.msg.substring(1)
                // 对this.msg重新赋值
                this.msg = end + start
                }, 400)

            },
            stop() {
                // 重置定时器clearInterval(触发状态)
                clearInterval(this.intervalId)
                // 跑马灯状态重置
                this.intervalId = null;
            }
        }
    })
  </script>
</body>
</html>

本文为作者独立编写

 本BLOG上所有的原创文章未经本人许可,不得用于商业用途及传统媒体。网络媒体转载请注明出处,否则属于侵权行为。 

Logo

前往低代码交流专区

更多推荐