分析:

  1. 给开始按钮绑定一个点击事件

  2.在按钮的事件处理函数中,写相关的业务代码

  3.拿到msg字符串

  4.调用字符串的substring来进行字符串的截取操作

  5.重新赋值利用vm实例的特性来达到跑马灯效果

注意:

  1.在vm实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须要用this.属性名   或者 this.方法名  来进行访问

  2. => 可以把data里的数据传入方法里的function

代码(附带停止):

    <!-- 控制区域 -->
    <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: '小火车呜呜呜~~~~~~呜呜呜~~~~',
                intervalId: null
            },
            methods: {
                lang(){
                    if (this.intervalId!=null) return;
                    this.intervalId=setInterval(() => {
                    // console.log(this.msg)
                    // 截取第一个字符
                    var start=this.msg.substring(0,1)
                    // 获取到后面的字符
                    var end=this.msg.substring(1)
                    // 重新拼接并赋值
                    this.msg=end + start
                    // vm 实例,会监听自己的数据,只要一发生变化,就会自动把最新的数据从data传到页面
                    },500)
                },
                stop(){
                    clearInterval(this.intervalId);
                    this.intervalId=null;
                }
            }
        })
    </script>

vue学习第二天:Vue跑马灯效果制作的更多相关文章

  1. Vue学习笔记四:跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  2. 第二章 Vue快速入门--10-11 跑马灯效果制作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. vue学习-day01(vue指令)

    目录: 1.什么是vue.js    2.为什么要学习前端的流行框架    3.框架和库的区别    4.后端MVC和前端的MVVM的区别    5.vue.js的基本代码--hollo world代 ...

  4. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  6. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  7. TextView的跑马灯效果(AS开发实战第二章学习笔记)

    TextView的跑马灯效果跑马灯用到的属性与方法说明singleLine 指定文本是否单行显示ellipsize 指定文本超出范围后的省略方式focusable 指定是否获得焦点,跑马灯效果要求设置 ...

  8. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  9. Android学习总结——TextView跑马灯效果

    Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

随机推荐

  1. Leetcode 416分割等和子集

    416. 分割等和子集 已知是个背包问题,由于可以等分为两部分,所以必定是个偶数. 一开始想到的是回溯法 bool helper(vector<int>&nums, int i, ...

  2. httppost的用法

    一,案例一 定义了一个list,该list的数据类型是NameValuePair(简单名称值对节点类型),这个代码多处用于Java像url发送Post请求.在发送post请求时用该list来存放参数. ...

  3. 【Java8新特性】面试官:谈谈Java8中的Stream API有哪些终止操作?

    写在前面 如果你出去面试,面试官问了你关于Java8 Stream API的一些问题,比如:Java8中创建Stream流有哪几种方式?(可以参见:<[Java8新特性]面试官问我:Java8中 ...

  4. ES7学习笔记(十三)GEO位置搜索

    ES的基本内容介绍的已经差不多了,最后我们再来看看GEO位置搜索,现在大部分APP都有基于位置搜索的功能,比如:我们点外卖,可以按照离我们的距离进行排序,这样可以节省我们的配送费和送餐的时间:还有找工 ...

  5. ReentrantLock解析及源码分析

    本文结构 Tips:说明一部分概念及阅读源码需要的基础内容 ReentrantLock简介 公平机制:对于公平机制和非公平机制进行介绍,包含对比 实现:Sync源码解析额,公平和非公平模式的加锁.解锁 ...

  6. 【Linux】将javaweb项目部署到CentOS的tomcat上

    1.将项目打包成war包 build之后war文件就生成了. 2.拷贝war文件到CentOS的tomcat的项目文件夹中 用WinSCP将文件粘帖进这个文件夹中 /wocloud/tomcat_cl ...

  7. Java实现 LeetCode 482 密钥格式化

    482. 密钥格式化 给定一个密钥字符串S,只包含字母,数字以及 '-'(破折号).N 个 '-' 将字符串分成了 N+1 组.给定一个数字 K,重新格式化字符串,除了第一个分组以外,每个分组要包含 ...

  8. Java实现 LeetCode 295 数据流的中位数

    295. 数据流的中位数 中位数是有序列表中间的数.如果列表长度是偶数,中位数则是中间两个数的平均值. 例如, [2,3,4] 的中位数是 3 [2,3] 的中位数是 (2 + 3) / 2 = 2. ...

  9. Java实现 LeetCode 171 Excel表列序号

    171. Excel表列序号 给定一个Excel表格中的列名称,返回其相应的列序号. 例如, A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> ...

  10. java实现漏掉的账目明细

    某财务部门结账时发现总金额不对头.很可能是从明细上漏掉了某1笔或几笔.如果已知明细账目清单,能通过编程找到漏掉的是哪1笔或几笔吗? 如果有多种可能,则输出所有可能的情况. 我们规定:用户输入的第一行是 ...