Vue實現(xiàn)跑馬燈效果
更新時間：2022年04月07日 11:26:12 作者：巫笙公子
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)的業(yè)務(wù)邏輯
1、給[嗨起來]按鈕，綁定一個點擊事件 v-on（@）。
2、在按鈕的事件函數(shù)處理中，寫相關(guān)的業(yè)務(wù)邏輯：拿到msg的字符串，后調(diào)用字符串中的substring來進行字符串的截取操作，放到最后一個位置。
3、為了實現(xiàn)點擊下按鈕，自動截取功能，需要將步驟2中代碼放到一個定時器中。
實現(xiàn)代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="嗨起來" @click="bejin">
<input type="button" value="停下" @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:'嗨起來，跑馬燈~~',
intervalId:null
},
methods:{
bejin(){
if(this.intervalId!=null) return
//箭頭解決this指向問題，由內(nèi)部的指向外部
this.intervalId=setInterval(()=>{
//獲取到頭的第一個字符
var start=this.msg.substring(0,1)
//獲取到后面的所有字符
var end=this.msg.substring(1)
//重新拼接得到新的字符串，并賦值給this.msg
this.msg=end+start
//注意：vm實例，會監(jiān)聽自己身上data中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會把最新數(shù)據(jù)，從data上同步到頁面中去
},50)
},
stop(){//停止計時器
clearInterval(this.intervalId)
//每當(dāng)清除了定時器后，需要重新把intervalId置為null
this.intervalId=null;
}
}
})
</script>
</body>
</html>更多文章可以點擊《Vue.js前端組件學(xué)習(xí)教程》學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
visible前面加冒號的，說明后面是一個變量或者表達式；沒加冒號的后面就是對應(yīng)的字符串字面量，這篇文章主要介紹了vue-cli中的:visible.sync是什么,需要的朋友可以參考下2022-11-11
npm install卡在“sill idealTree buildDeps“問題的兩種解
本文主要介紹了npm install卡在“sill idealTree buildDeps“問題的兩種解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
這篇文章主要介紹了手把手教學(xué)vue的路由權(quán)限問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue router-link下劃線和顏色問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
什么是vue.js事件處理器？這篇文章主要介紹了vue.js事件處理器的相關(guān)資料2017-03-03
Ant?Design?Vue中的table與pagination的聯(lián)合使用方式
這篇文章主要介紹了Ant?Design?Vue中的table與pagination的聯(lián)合使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue跳轉(zhuǎn)頁面的幾種常用方法實例總結(jié)
Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界面,在Vue中,頁面跳轉(zhuǎn)通常使用路由(Router)來實現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法,需要的朋友可以參考下2024-05-05
Vue實現(xiàn)拖拽功能的基本原理是監(jiān)聽鼠標(biāo)事件,實時更新拖拽元素的位置,最后在合適的時機停止拖拽并更新元素位置,在Vue中,我們可以通過綁定相關(guān)事件來實現(xiàn)這一功能2025-02-02
這篇文章主要介紹了vue打包部署后 瀏覽器緩存問題,導(dǎo)致控制臺報錯ChunkLoadError: Loading chunk failed的解決方案,文中有相關(guān)的圖文和代碼供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-12-12
今天小編就為大家分享一篇解決vue v-for src 圖片路徑問題 404，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11