第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<!-- <script src="./lib/vue-2.6.10.js"></script> -->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script> </head> <body>
<!-- 2.创建一个要控制的区域 -->
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{ msg }}</h4>
</div> <script>
//注意：在VM实例中，如果想要获取 data 上的数据，或者想要调用methods中的方法，必须通过this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的VM实例对象
var vm = new Vue({
el:'#app',
data:{
msg:'猥琐发育，别浪~~！',
intervalId:null //在data上定义 定时器Id
},
methods:{
//老写法： lang:function(){}
//es6写法
lang(){
// console.log(this.msg)
// var _this=this
//=>箭头函数解决this指向的问题，箭头函数内部的this永远和箭头函数外部保持一致，外部的this指向VM实例，内部的this也是指向VM实例。箭头函数使内部的this指向外部的this if(this.intervalId !=null) return;
this.intervalId= setInterval( () => {
// 获取到头的第一个字符
var start = this.msg.substring(0,1)
//获取到后面的所有字符
var end=this.msg.substring(1)
//重新拼接得到新的字符串，并赋值给 this.msg
this.msg=end+start
},400) //主要：VM实例，会监听自己身上data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
}, stop(){ //停止定时器
clearInterval(this.intervalId)
//每当清除了定时器之后，需要重新把 intervalId 置为 null
this.intervalId=null;
}
}
}) //分析：
//1. 给【浪起来】 按钮，绑定一个点击事件 v-on @
//2.在按钮的时间处理函数中，写相关的业务逻辑：拿到msg字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可；
//3.为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
</script>
</body>
</html>
第二章 Vue快速入门--10-11 跑马灯效果制作的更多相关文章
- 第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--8 v-bind指令的学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用
7 讲解v-cloak.v-text.v-html的基本使用 <!DOCTYPE html> <html lang="en"> <head> & ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- XML中不能识别&符号, 需要转义吗？
“&”在XML中是具有特殊含义的,是转义字符的前缀,如果要想用这个字符就需要转义.遇到“&”就替换成“&”就好了; xml所有转义符 和 & & 大于 ...
- jstack 命令
NAME jstack - Prints Java thread stack traces for a Java process, core file, or remote debug server. ...
- 第六周课程总结&java实验报告四
第六周课程总结: 一.instanceof关键字 1.作用:在Java中可以使用instanceof关键字判断一个对象到底是哪个类的实例. 2.格式:对象 instanceof 类 -> 返回b ...
- Oracle-DQL 1- select基础
说明:语句中说到的“表”,以及表中有哪些“列”自行脑补......重要的是理解概念,能看懂语句代表的含义就可以了~ DQL-数据查询语句: 1.* 表示所有列SELECT * FROM emp; 2. ...
- SQL 拼接字符串 使用IN查询方法
问题描述 当在 SQL SERVER 中查询的时候,同事遇到一个字段存储的字符串为用逗号分隔的主键 ID 值,格式为:1,2,3,4,这时候需要查询符合条件的所有数据,所以选择使用 IN 查询,但是直 ...
- 设置gridView 行号 行号宽
gridView1.IndicatorWidth=30; //设置行号宽度 //对gridView1的CustomDrawRowIndicator事件进行操作 进行行号显示 private stati ...
- SQL Server中bcp命令的用法以及数据批量导入导出
原文:SQL Server中bcp命令的用法以及数据批量导入导出 1.bcp命令参数解析 bcp命令有许多参数,下面给出bcp命令参数的简要解析 用法: bcp {dbtable | query} { ...
- curl post请求封装
/* POST /servlet/ICBCCMPAPIReqServlet?userID=jyi.y.1001&PackageID=201807311347539185&SendTim ...
- java如何防止反编译（转）
出处: java如何防止反编译 一些防止java代码被反编译的方法 综述(写在前面的废话) Java从诞生以来,其基因就是开放精神,也正因此,其可以得到广泛爱好者的支持和奉献,最终很快发展壮大,以至于 ...
- Linux磁盘挂载、分区、扩容操作
本文最早发布于 Rootrl's blog 注:以下操作系统环境为CentOS7 基本概念 在操作前,首先要了解一些基本概念 磁盘 在Linux系统中所有的设备都会以文件的形式存储.设备一般保存在/d ...