使用前两章内容做一个简单的跑马灯效果
<! 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>
2964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
