Vue實現(xiàn)簡易跑馬燈效果

更新時間：2022年05月18日 16:37:24 作者：曉宇碼匠

這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡易跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下

一個簡單的跑馬燈效果，就是如下這種效果

Vue跑馬燈效果：

1.分析

a.點擊"加油"按鈕綁定一個點擊事件，使用v-on或者縮寫:"@"
b.在按鈕的事件處理函數(shù)中，寫相關的業(yè)務邏輯代碼：拿到 msg 字符串，然后調(diào)用字符串的 substring 來進行字符串的截取操作，把第一個字符截取出來，放到最后一個位置即可；
為了實現(xiàn)點擊下按鈕，自動截取的功能，需要把 2 步驟中的代碼，放到一個定時器中去；

2.實現(xiàn)

2.1、綁定事件

<input type="button" value="加油" @click="lang">
<input type="button" value="低調(diào)" @click="stop">

<script>
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? msg: '加油，小強，你最棒~~！',
? ? ? ? intervalId: null // 在data上定義 定時器Id
? ? ? },
? ? ? methods: {
? ? ? ? lang() {
? ? ? ? },
? ? ? ? stop() {?
? ? ? ? }
? ? ? }
? ? })
</script>

2.2、動態(tài)截取加定時

var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? msg: '加油，小強，你最棒~~！',
? ? ? ? intervalId: null // 在data上定義 定時器Id
? ? ? },
? ? ? methods: {
? ? ? ? lang() {
? ? ? ? ? // 獲取到頭的第一個字符
? ? ? ? ? // 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 上同步到頁面中去；【好處：程序員只需要關心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁面】
? ? ? ? },
? ? ? ? stop() {?
? ? ? ? }
? ? ? }
? ? })

2.3、取消定時器

stop() {?
?? ??? ?// 停止定時器
? ? ? ? clearInterval(this.intervalId)
? ? ? ? // 每當清除了定時器之后，需要重新把 intervalId 置為 null
? ? ? ? this.intervalId = null;
}

2.4、完整代碼

<!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>
? <!-- 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>
? ? // 分析：
? ? // 1. 給 【浪起來】 按鈕，綁定一個點擊事件 ? v-on ? @
? ? // 2. 在按鈕的事件處理函數(shù)中，寫相關的業(yè)務邏輯代碼：拿到 msg 字符串，然后 調(diào)用 字符串的 substring 來進行字符串的截取操作，把 第一個字符截取出來，放到最后一個位置即可；
? ? // 3. 為了實現(xiàn)點擊下按鈕，自動截取的功能，需要把 2 步驟中的代碼，放到一個定時器中去；

? ? // 注意：在 VM實例中，如果想要獲取 data 上的數(shù)據(jù)，或者 想要調(diào)用 methods 中的 方法，必須通過 this.數(shù)據(jù)屬性名 ?或 ?this.方法名 來進行訪問，這里的this，就表示 我們 new 出來的 ?VM 實例對象
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? msg: '加油，小強，你最棒~~！',
? ? ? ? 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 上同步到頁面中去；【好處：程序員只需要關心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁面】
? ? ? ? },
? ? ? ? stop() { // 停止定時器
? ? ? ? ? clearInterval(this.intervalId)
? ? ? ? ? // 每當清除了定時器之后，需要重新把 intervalId 置為 null
? ? ? ? ? this.intervalId = null;
? ? ? ? }
? ? ? }
? ? })
? </script>
</body>

</html>

最終效果