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文本中文字 ...
随机推荐
- 用css实现正方形div
目标:实现一个正方形,这个正方形边长等于 方法一:使用单位vw, (ps我觉得这个是最简单的方法) html结构也很简单,只有一个div即可 <html> <body> < ...
- 微信小程序 人脸识别登陆模块
微信小程序---人脸识别登陆的实现 关键词:微信小程序 人脸识别 百度云接口 前言 这是一篇关于一个原创微信小程序开发过程的原创文章.涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口.小程序的 ...
- 年末展望：Oracle 对 JDK收费和.NET Core 给我们的机遇
2018年就结束了,马上就要迎来2019年,这一年很不平凡,中美贸易战还在继续,IT互联网发生急剧变化,大量互联网公司开始裁员,微软的市值在不断上升 ,在互联网公司的市值下跌过程中爬到了第一的位置,我 ...
- 连表查询都用Left Join吧
最近看同事的代码,SQL连表查询的时候很多时候用的是Inner Join,而我觉得对我们的业务而言,99.9%都应该使用Left Join(还有0.1%我不知道在哪),我用最简单的方式来描述这两者的区 ...
- 百度APP移动端网络深度优化实践分享(一)：DNS优化篇
本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<一>DNS优化>,感谢原作者的无私分享. 一.前言 网络优化是客户端几大技术方 ...
- 【Android Studio安装部署系列】三十六、从Android Studio3.1.4升级到Android studio3.2【以及创建android p模拟器（未成功）】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 因为想要使用Android P模拟器,所以需要将Android Studio升级到3.2版本以上. 按照官网的说法:参考<ht ...
- AppBoxFuture(五): 分布式文件存储-Store Everything
本来本篇是想介绍前端组件化开发用户界面,发现框架还未实现文件存储,原本计划是后续设计开发的,索性把计划提前,所以本篇将介绍基于Raft实现分布式的文件存储引擎. 一. 实现思路 既然是分布式存 ...
- 痞子衡嵌入式：语音处理工具Jays-PySPEECH诞生记 - 索引
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是语音处理工具Jays-PySPEECH诞生. 智能语音交互市场近年来发展迅速,其典型的应用之一智能音箱产品如今已走入千家万户,深受大家 ...
- 痞子衡嵌入式：恩智浦MCU安全加密启动一站式工具NXP-MCUBootUtility用户指南
NXP MCU Boot Utility English | 中文 1 软件概览 1.1 介绍 NXP-MCUBootUtility是一个专为NXP MCU安全加密启动而设计的工具,其特性与NXP M ...
- Go channel实现源码分析
go通道基于go的并发调度实现,本身并不复杂,go并发调度请看我的这篇文章:go并发调度原理学习 1.channel数据结构 type hchan struct { qcount uint // 缓冲 ...