Vue實(shí)現(xiàn)簡(jiǎn)易跑馬燈效果

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

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

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

一個(gè)簡(jiǎn)單的跑馬燈效果，就是如下這種效果

Vue跑馬燈效果：

1.分析

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

2.實(shí)現(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: '加油，小強(qiáng)，你最棒~~！',
? ? ? ? intervalId: null // 在data上定義 定時(shí)器Id
? ? ? },
? ? ? methods: {
? ? ? ? lang() {
? ? ? ? },
? ? ? ? stop() {?
? ? ? ? }
? ? ? }
? ? })
</script>

2.2、動(dòng)態(tài)截取加定時(shí)

var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? msg: '加油，小強(qiáng)，你最棒~~！',
? ? ? ? intervalId: null // 在data上定義 定時(shí)器Id
? ? ? },
? ? ? methods: {
? ? ? ? lang() {
? ? ? ? ? // 獲取到頭的第一個(gè)字符
? ? ? ? ? // 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實(shí)例，會(huì)監(jiān)聽自己身上 data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會(huì)自動(dòng)把 最新的數(shù)據(jù)，從data 上同步到頁(yè)面中去；【好處：程序員只需要關(guān)心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁(yè)面】
? ? ? ? },
? ? ? ? stop() {?
? ? ? ? }
? ? ? }
? ? })

2.3、取消定時(shí)器

stop() {?
?? ??? ?// 停止定時(shí)器
? ? ? ? clearInterval(this.intervalId)
? ? ? ? // 每當(dāng)清除了定時(shí)器之后，需要重新把 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. 導(dǎo)入Vue包 -->
? <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
? <!-- 2. 創(chuàng)建一個(gè)要控制的區(qū)域 -->
? <div id="app">
? ? <input type="button" value="加油" @click="lang">
? ? <input type="button" value="低調(diào)" @click="stop">

? ? <h4>{{ msg }}</h4>

? </div>

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

? ? // 注意：在 VM實(shí)例中，如果想要獲取 data 上的數(shù)據(jù)，或者 想要調(diào)用 methods 中的 方法，必須通過(guò) this.數(shù)據(jù)屬性名 ?或 ?this.方法名 來(lái)進(jìn)行訪問(wèn)，這里的this，就表示 我們 new 出來(lái)的 ?VM 實(shí)例對(duì)象
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? msg: '加油，小強(qiáng)，你最棒~~！',
? ? ? ? intervalId: null // 在data上定義 定時(shí)器Id
? ? ? },
? ? ? methods: {
? ? ? ? lang() {
? ? ? ? ? // console.log(this.msg)
? ? ? ? ? // 獲取到頭的第一個(gè)字符
? ? ? ? ? // 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實(shí)例，會(huì)監(jiān)聽自己身上 data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會(huì)自動(dòng)把 最新的數(shù)據(jù)，從data 上同步到頁(yè)面中去；【好處：程序員只需要關(guān)心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁(yè)面】
? ? ? ? },
? ? ? ? stop() { // 停止定時(shí)器
? ? ? ? ? clearInterval(this.intervalId)
? ? ? ? ? // 每當(dāng)清除了定時(shí)器之后，需要重新把 intervalId 置為 null
? ? ? ? ? this.intervalId = null;
? ? ? ? }
? ? ? }
? ? })
? </script>
</body>

</html>

最終效果