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">開(kāi)啟</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，專(zhuān)門(mén)用來(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í)候才開(kāi)啟定時(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 TypeScript使用eval函數(shù)遇到的問(wèn)題
近幾年前端對(duì) TypeScript的呼聲越來(lái)越高，Typescript也成為了前端必備的技能。TypeScript是JS類(lèi)型的超集，并支持了泛型、類(lèi)型、命名空間、枚舉等特性，彌補(bǔ)了 JS 在大型應(yīng)用開(kāi)發(fā)中的不足2023-01-01
基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能
這篇文章主要介紹了基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式
這篇文章主要介紹了vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue中實(shí)現(xiàn)動(dòng)畫(huà)效果的多種方法小結(jié)
平時(shí)我們能在網(wǎng)頁(yè)上看到很多動(dòng)畫(huà)效果,這些效果看起來(lái)就很引人注目,我們是不是也可以在自己的項(xiàng)目中添加一些動(dòng)畫(huà)效果,讓我們的頁(yè)面看起來(lái)更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實(shí)現(xiàn)動(dòng)畫(huà)效果的多種方法,需要的朋友可以參考下2024-07-07
解決vue keep-alive 數(shù)據(jù)更新的問(wèn)題
今天小編就為大家分享一篇解決vue keep-alive 數(shù)據(jù)更新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue.js實(shí)現(xiàn)的購(gòu)物車(chē)功能詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)的購(gòu)物車(chē)功能,結(jié)合實(shí)例形式分析了vue.js購(gòu)物車(chē)的原理、數(shù)值計(jì)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了Vue多選列表組件深入詳解，這個(gè)是vue的基本組件，有需要的同學(xué)可以研究下2021-03-03
這篇文章主要介紹了Vue.js $refs用法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue項(xiàng)目如何使用three.js實(shí)現(xiàn)vr360度全景圖片預(yù)覽
這篇文章主要介紹了vue項(xiàng)目如何使用three.js實(shí)現(xiàn)vr360度全景圖片預(yù)覽,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了詳解vue父子組件間傳值(props)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06