vue實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果
更新時(shí)間：2021年10月27日 11:59:19 作者：今天會(huì)下雨嗎
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡(jiǎn)單跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
代碼
html
<div id="app">
<button @click="start">開啟</button>
<button @click="stop">停止</button>
<p>{{msg}}</p>
</div>
vue
var app = new Vue({
el: "#app", // 表示，當(dāng)前我們new的這vue實(shí)例，要控制頁(yè)面上的那個(gè)區(qū)域
// data就是mvvm中的 m，專門用來(lái)保存每個(gè)頁(yè)面的數(shù)據(jù)
data:{
msg: "鎖定今晚19:30李佳琦直播間,不要錯(cuò)過(guò)喲~",
timer: null
},
methods:{
start(){
// 通過(guò)定時(shí)器文字自己按時(shí)滾動(dòng)
// 箭頭函數(shù)可以解決this指向問(wèn)題
// 箭頭函數(shù)里的this指向跟函數(shù)外面的一致
// 當(dāng) timer 不為空的時(shí)候才開啟定時(shí)器
if (this.timer != null) return;
this.timer = setInterval(() => {
// 獲取第一個(gè)字符
var startMsg = this.msg.substring(0,1);
// 獲取后面所有的字符
var endMsg = this.msg.substring(1);
// 重新拼接msg
this.msg = endMsg + startMsg;
},400)
},
stop(){
clearInterval(this.timer);
// 可以自己打印一下清除定時(shí)器以后的timer， 會(huì)發(fā)現(xiàn)不是為null的，所有要重新賦值
this.timer = null;
}
}
});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
Element如何實(shí)現(xiàn)loading的方法示例
本文主要介紹了Element如何實(shí)現(xiàn)loading的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法,文中的實(shí)現(xiàn)步驟講解詳細(xì),并且有詳細(xì)的代碼示例,需要的小伙伴可以參考一下2023-10-10
vue中v-model和響應(yīng)式的實(shí)現(xiàn)原理解析
這篇文章主要介紹了vue中v-model和響應(yīng)式的實(shí)現(xiàn)原理,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
vue-draggable實(shí)現(xiàn)拖拽表單的示例代碼
本文主要介紹了vue-draggable實(shí)現(xiàn)拖拽表單的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
我們對(duì)Vue中data數(shù)據(jù)的修改會(huì)導(dǎo)致界面對(duì)應(yīng)的響應(yīng)變化，而通過(guò)nextTick方法，可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM，講起來(lái)可能還是有點(diǎn)夢(mèng)幻，下面我們直接使用nextTick體驗(yàn)一下效果2022-08-08
vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法
這篇文章主要介紹了vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了詳解Vue打包優(yōu)化之code spliting，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04