Vue.js01：跑马灯效果
<!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：跑马灯效果的更多相关文章
- vue实现跑马灯效果
vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- 使用Vue做出跑马灯效果
<div id="pmd"> <h4> {{msg}}</h4> <input type="b ...
- vue文字跑马灯效果
https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...
- Vue学习笔记四：跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- vue学习第二天：Vue跑马灯效果制作
分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
随机推荐
- 泛微关于js设计的一些小技巧
1.关于泛微流程的js设计 泛微oa可以插入javascript可以diy自己想要的表单页面前端功能.如果有前端开发经验,或者熟练使用jQuery的话,这将变得非常容易!同时泛微OA内部有很多库,包括 ...
- Android 上传图片到服务器 okhttp一
[目录] (一)上传图片到服务器一 ---------------------------------Android代码 (二)上传图片到服务器二--------------------------- ...
- svn 迁移至git操作手册
svn 迁移至git操作手册 项目交付.版本管理工具变更等情况下,迁移svn旧历史记录有很大必要,方便后续追踪文件的提交历史,文件修改记录比对等.git自带了从svn迁移至git的工具命令,可很好的对 ...
- SqlServer 递归查询
--查询部门及下属部门列表 WITH TEMP --递归 AS (SELECT Id, Code, Name, ParentId FROM [dbo].[AspSysDepartments] --查询 ...
- 排错：Windows系统异常导致Filebeat无法正常运行
Windows 下Filebeat排错Case实例一份,请查收. 问题描述: Windows Server下Filebeat Agent服务无法正常启动,导致网络数据打点无法正常进行,影响大范围用户网 ...
- Storm入门（六）深入理解可靠性机制
转自http://blog.csdn.net/zhangzhebjut/article/details/38467145 一 可靠性简介 Storm的可靠性是指Storm会告知用户每一个消息单元是否在 ...
- Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线
这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...
- JDK对CAS ABA问题解决-AtomicMarkableReference和AtomicStampedReference
我们知道AtomicInteger和AtomicLong的原子操作,但是在这两个类在CAS操作的时候会遇到ABA问题,可能大家会疑问什么是ABA问题呢,请待我细细道来: ABA问题:简单讲就是多线程环 ...
- SUSE12SP3-Mycat(3)Server.xml配置详解
简介 server.xml 几乎保存了所有 mycat 需要的系统配置信息.其在代码内直接的映射类为 SystemConfig 类. user 标签 <user name="test& ...
- 构造方法、This关键字、静态与封装的特性与作用
1.构造方法 构造方法是一种特殊的方法,专门用于构造/实例化对象. 构造方法根据是否有参数分为无参构造方法和有参构造方法. 1.1无参构造方法 无参构造方法就是构造方法没有任何参数.无参构造方法在创建 ...