<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./vue.min.js"></script>

</head>

<body>

    <div id="app">

        <!-- @ 用于绑定事件 -->

        <input type="button" value="跑起来" @click="start">

        <input type="button" value="停下来" @click="stop">

        <!-- 插值表达式，展示data属性数据 -->

        <h3>{{ msg }}</h3>

    </div>

</body>

<script>

    let vm = new Vue({

        // 规定操作的前端元素，id值为app的元素

        el: '#app',

        data:{

            msg: '恕我直言，在座的各位都是垃圾...',

            //

            myInterval: null

        },

        methods:{

            start:function(){

                console.log('跑起来')

                if(this.myInterval){

                    return

                }

                // => 的作用，我还朦朦胧胧的，大概意思就是使下面的this能够访问上面的data中的数据

                this.myInterval = setInterval(() => {

                    // 绑定字符串中的第一个元素

                    let start = this.msg.substring(0, 1)

                    // 绑定字符串中除第一个元素外的其他元素

                    let end = this.msg.substring(1)

                    // 进行新的字符串拼接并赋值

                    this.msg = end + start

                }, 200)

            },

            stop(){

                console.log('停下来')

                // clearInterval 用来终止动作

                clearInterval(this.myInterval)

                this.myInterval = null

            }

        }

    })

</script>

</html>

Vue.js01：跑马灯效果的更多相关文章

  1. vue实现跑马灯效果

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

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

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

  3. 使用Vue做出跑马灯效果

     <div id="pmd">         <h4> {{msg}}</h4>         <input type="b ...

  4. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

  5. Vue学习笔记四：跑马灯效果

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

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

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

  7. vue学习第二天：Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

  8. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  9. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

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

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

随机推荐

  1. Android-原笔迹手写的探索与开发

     前言 这篇文章主要是关于移动端原笔迹的开发,让平板上的手写效果达到笔迹光滑且有笔锋. 介绍关于原笔迹的算法思路. 项目github地址 算法思路分析 曲线拟合算法 利用曲线拟合算法增加虚拟的点,使得 ...

  2. git 版本库基础知识学习

    什么是版本库?什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可 ...

  3. Windows server 1709（不含UI）模板部署

    1.系统安装 在虚拟机导入安装镜像,客户端操作系统选择” windows server 2012”,虚拟磁盘类型选择”SCSI”:依照安装向导正确安装操作系统 2.安装vmware tools 选择虚 ...

  4. PHP错误：SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client

    使用PHP连接MySQL 8的时候,可能会发生如标题所示的错误: SQLSTATE[HY000] [2054] The server requested authentication method u ...

  5. 【JavaScript动画基础】学习笔记（一）-- 旋转箭头

    随着鼠标的移动旋转箭头. requestAnimationFrame 在requestAnimationFrame之前我们可以用setInterval来实现动画的循环: function drawFr ...

  6. 2. VIM 系列 - 初探vim配置文件

    目录 配置文件 .vimrc 基本配置 tab 键设置 热键配置 配置文件 刚安装vim默认配置,功能是很简单的,vim的功能很多是需要配置开启的. .vimrc 使用vim打开配置文件~/.vimr ...

  7. Mac电脑上一款非常时尚高清的动态壁纸Living Wallpaper HD

    很多朋友Mac电脑上都喜欢用动态壁纸,Living Wallpaper HD是本人尝试的一款非常不错的高清动态壁纸.有时钟.天气等各种组建,非常时尚美观. Living Wallpaper HD下载地 ...

  8. 每日分享！～ JavaScript中面试基础--1，数组检测的方式 2.传统事件绑定和W3C标准绑定事件的区别～

    javaScript 那些方式中检测数据类型 typeof typeof isNaN // 结果是function 检测数组的几种方式 instanceof arr instanceof Array( ...

  9. Python基础（os模块）

    os模块用于操作系统级别的操作: os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当 ...

  10. mysql的学习笔记(八)

    1.存储引擎(表类型) mysql将数据以不同的技术存储在文件(内存)中,这种技术称为存储引擎.每一种存储引擎使用不同的存储机制,索引技巧,锁定水平,提供广泛且不同的功能. mysql支持的存储引擎 ...