CSDN地址：https://blog.csdn.net/qq_38191191
Vue跑馬燈效果
1.分析
a.點擊"加油"按鈕綁定一個點擊事件，使用v-on或者縮寫:"@"
b.在按鈕的事件處理函數(shù)中杰妓，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到 msg 字符串指蚜，然后 調(diào)用 字符串的 substring 來進行字符串的截取操作幕垦，把 第一個字符截取出來未荒，放到最后一個位置即可哩罪；
c.為了實現(xiàn)點擊下按鈕呀狼，自動截取的功能，需要把 2 步驟中的代碼里烦，放到一個定時器中去孵班；
2.實現(xiàn)
2.1 綁定事件
<input type="button" value="走你" @click="lang">
<input type="button" value="站住" @click="stop">
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '猥瑣發(fā)育，別浪~~招驴！',
intervalId: null // 在data上定義 定時器Id
},
methods: {
lang() {
},
stop() {
}
}
})
</script>
image.gif
2.2 動態(tài)截取加定時
<script>
// 注意：在 VM實例中，如果想要獲取 data 上的數(shù)據(jù)枷畏，或者 想要調(diào)用 methods 中的 方法别厘，必須通過 this.數(shù)據(jù)屬性名 或 this.方法名 來進行訪問，這里的this拥诡，就表示 我們 new 出來的 VM 實例對象
var vm = new Vue({
el: '#app',
data: {
msg: '猥瑣發(fā)育触趴，別浪~~！',
intervalId: null // 在data上定義 定時器Id
},
methods: {
lang() {
// console.log(this.msg)
// 獲取到頭的第一個字符
// 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實例冗懦，會監(jiān)聽自己身上 data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化仇祭，就會自動把 最新的數(shù)據(jù)披蕉，從data 上同步到頁面中去；【好處：程序員只需要關(guān)心數(shù)據(jù)乌奇，不需要考慮如何重新渲染DOM頁面】
},
}
})
</script>
image.gif
2.3 取消定時器
stop() { // 停止定時器
clearInterval(this.intervalId)
// 每當清除了定時器之后没讲，需要重新把 intervalId 置為 null
this.intervalId = null;
}
image.gif
代碼示例：
<body>
<!-- 2\. 創(chuàng)建一個要控制的區(qū)域 -->
<div id="app">
<input type="button" value="浪起來" @click="lang">
<input type="button" value="低調(diào)" @click="stop">
<h4>{{ msg }}</h4>
</div>
<script>
// 注意：在 VM實例中，如果想要獲取 data 上的數(shù)據(jù)礁苗，或者 想要調(diào)用 methods 中的 方法爬凑，必須通過 this.數(shù)據(jù)屬性名 或 this.方法名 來進行訪問，這里的this试伙，就表示 我們 new 出來的 VM 實例對象
var vm = new Vue({
el: '#app',
data: {
msg: '猥瑣發(fā)育嘁信，別浪~~于样！',
intervalId: null // 在data上定義 定時器Id
},
methods: {
lang() {
// console.log(this.msg)
// 獲取到頭的第一個字符
// 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實例潘靖，會監(jiān)聽自己身上 data 中所有數(shù)據(jù)的改變穿剖，只要數(shù)據(jù)一發(fā)生變化，就會自動把 最新的數(shù)據(jù)秘豹，從data 上同步到頁面中去携御；【好處：程序員只需要關(guān)心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁面】
},
stop() { // 停止定時器
clearInterval(this.intervalId)
// 每當清除了定時器之后既绕，需要重新把 intervalId 置為 null
this.intervalId = null;
}
}
})
// 分析：
// 1\. 給 【浪起來】 按鈕啄刹，綁定一個點擊事件 v-on @
// 2\. 在按鈕的事件處理函數(shù)中，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到 msg 字符串凄贩，然后 調(diào)用 字符串的 substring 來進行字符串的截取操作誓军，把 第一個字符截取出來，放到最后一個位置即可疲扎；
// 3\. 為了實現(xiàn)點擊下按鈕昵时，自動截取的功能，需要把 2 步驟中的代碼椒丧，放到一個定時器中去壹甥；
</script>
</body>
image.gif
