<!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="./js/vue.js"></script>
</head>
<body>
<div id="a">
<input type="button" value="浪起來" @click='lang'>
<input type="button" value="穩住" @click='tingzhi'>
<p>{{ msg }}</p>
</div>
</body>
<script>
// vm上的數據發生變化 就會把新的數據從data中同步到頁面中去
const vm = new Vue({
el: '#a',
data: {
msg: '大家一起嗨起來~~~！',
id: null,
},
methods: {
lang() {
// vue中想要獲取上個局部數據 要用到this 但是這里有用到了定時器 this會指向window 所以我用了es6中的 =>函數
if (this.id != null) return;
// 要給一個點擊的判斷 要不然就會出現多次運行定時器 停止就不會管用了
this.id = setInterval(() => {
const q = this.msg.substring(0, 1);
const h = this.msg.substring(1);
// 把截取的字符創拼接到 msg 中
this.msg = h + q;
}, 100)
},
tingzhi() {
clearInterval(this.id);
// 要把初始值在賦給 msg 要不然定時器不會再執行
this.id = null;
}
}
})
</script>
</html>
很簡單的走馬燈效果
關注公眾號 WEB前端大澳 領取資料
