<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 创建一个要控制的区域 -->
<div id="app">
<input type="button" value="开" @click="lang">
<input type="button" value="关" @click="stop">
<h1> {{ mes }}</h1>
</div>
<!-- 注意: 在 app实例中,如果想获取 data上的数据,或者想要调用methods中的方法,
必须通过this.数据属性名 或 this.方法名,来进行访问,这里的this,就表示我们 new 出来的 app实例对象 -->
<script>
var app = new Vue({
el:"#app",
data:{
mes:'我只想给你给你宠爱,这算不算爱',
intid:null, //在data上定义 定时器id
},
// 封装方法
//注意 app 实例,会监听自己身上 data 中所有数据的改变,只要数据一发生变化,就会自动把
// 最新的数据,从data 上同步到页面中,
methods:{
lang(){
// ---------写一个定时器 然后没4秒走一轮-------
// var _this = this;
// setInterval(function(){
// // 获取到第一个字符
// var start = _this.mes.substring(0, 1)
// //获取最后面所有字符
// var end = _this.mes.substring(1)
// //两者拼接起来 并赋值给this.mes 顺序不能写乱 不然出不来你想要的结果
// _this.mes = end+start
// },400)
// console.log(_this.mes)
//-------会实现 点击按钮,下边字会变动
// // 获取到第一个字符
// var start = this.mes.substring(0, 1)
// //获取最后面所有字符
// var end = this.mes.substring(1)
// //两者拼接起来 并赋值给this.mes 顺序不能写乱 不然出不来你想要的结果
// this.mes = end+start
//-------------------箭头函数
//这一行是 直接关闭一次就开不了了
if (this.intid != null) return;
this.intid=setInterval(() =>{
// 获取到第一个字符
var start = this.mes.substring(0, 1)
//获取最后面所有字符
var end = this.mes.substring(1)
//两者拼接起来 并赋值给this.mes 顺序不能写乱 不然出不来你想要的结果
this.mes = end+start
},400)
console.log(this.mes)
},
stop(){
//定义一个关闭定时器 在箭头函数 那边 this.intid = 指向定时器
clearInterval(this.intid)
//每当清除了定时器之后,需要重新把 intid置为null
this.intid = null;
}
}
})
</script>
</body>
</html>
02-21
283