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文本中文字 ...
随机推荐
- mybatis的时间比较 xml 及不解析<=的写法
<if test="type ==1"> and DATE_FORMAT(create_date,'%Y-%m-%d') = DATE_FORMAT(now(),'%Y ...
- 如何给Windows2016新建IIS并建立网站
首先在菜单按钮旁右击-----点击Control Panel(控制面板) 点击Turn Windows features on or off 开始设置环境!!!!! 认真勾选参数!!! 然后点击安装! ...
- Windows系统配置OutLook邮箱教程一
本示例演示Windows系统中OutLook邮箱设置 1.打开控制面板->类型选择小图标->找到Mail(Microsoft OutLook 2016). 2.鼠标左键双击Mail. 3. ...
- LeetCode算法题-Letter Case Permutation（Java实现）
这是悦乐书的第315次更新,第336篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第184题(顺位题号是784).给定一个字符串S,将每个字母单独转换为小写或大写以创建另 ...
- Cesium3DTileset示例
3D Tiles是Cesium中很核心的一部分,尤其是用来实现大范围的模型场景数据的加载应用. 三维倾斜模型.人工建模.BIM模型等等,都可以转换成3D Tiles,进而为我们所用. 从Cesium1 ...
- 基于python语言的tensorflow的‘端到端’的字符型验证码识别源码整理(github源码分享)
基于python语言的tensorflow的‘端到端’的字符型验证码识别 1 Abstract 验证码(CAPTCHA)的诞生本身是为了自动区分 自然人 和 机器人 的一套公开方法, 但是近几年的 ...
- java的poi技术读取和导入Excel实例
本篇文章主要介绍了java的poi技术读取和导入Excel实例,报表输出是Java应用开发中经常涉及的内容,有需要的可以了解一下. 报表输出是Java应用开发中经常涉及的内容,而一般的报表往往缺乏通用 ...
- Go基础（3）
demo1: package main import "fmt" func print() { for i := 1; i < 10; i++ { for j := 1; j ...
- 面向对象（__str__和__repr__方法）
#Author : Kelvin #Date : 2019/1/21 16:19 class App: def __init__(self,name): self.name=name # def __ ...
- 通过数据分析告诉你北京Python开发的现状
相信各位同学多多少少在拉钩上投过简历,今天突然想了解一下北京Python开发的薪资水平.招聘要求.福利待遇以及公司地理位置.既然要分析那必然是现有数据样本.本文通过爬虫和数据分析为大家展示一下北京Py ...