使用前两章内容做一个简单的跑马灯效果
<! 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>
<!--1.导入Vue的包-->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!--创建一个要控制的区-->
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
//注意:在vue实例中,想要获取data上的数据,或者,想要用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问
//这里的this,就表示我们new出来的VM实例对象
var vm = new Vue({
el:'#app',
data:{
msg:'猥琐发育,别浪~~稳住,我们能赢',
intervalId:null //在data上定义定时器ID
},
method:{
lang(){
if(this.intervalId != null)return;
this.intervalId = setInterval(() => { //es6中使用箭头函数,解决this指向问题,内部的this永远和外部的this一致
var start = this.msg.substring(0,1);
var end = this.msg.substring(1);
this.msg = end + start;
},400)
//注意:VM实例,会监听自己身上的data中所有数据的改变,只要数据一发生变化,就会自动把最新的数据,从data上同步
//到页面上去【好处:程序员只需要关心数据,不需要如何渲染到页面】
},
stop(){ //停止定时器
clearInterval(this.intervalId)
//每当清楚了定时器之后,需要重新把intervaId置为null
this.intervalId = null
}
}
});
//分析:
//1.给:“狼起来”按钮绑定点击事件 v-on
//2.在按钮的事件处理函数中,写相关的业务逻辑代码,拿到msg字符串,然后调用字符串的substring来进行字符串的截取,把第一个字符截取到最后一个位置
//3.为了实现点击一下按钮自动截取功能,需要设置一个定时器
</script>
</body>
</html>