Vue實(shí)現(xiàn)跑馬燈簡單效果
更新時(shí)間：2021年10月29日 11:24:07 作者：一個(gè)小點(diǎn)點(diǎn).
這篇文章主要為大家詳細(xì)介紹了Vues實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)跑馬燈簡單效果的具體代碼，供大家參考，具體內(nèi)容如下
1、跑馬燈效果
說明：單擊"應(yīng)援"按鈕文字向左飄動,再單擊"暫停"按鈕停止當(dāng)前飄動
2、完整代碼 (注意：代碼中需要引入vue.js文件，這個(gè)文件自己根據(jù)目錄位置引入，具體位置代碼中有注釋)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑馬燈</title>
<!-- 引入vue.js文件-->
<script src="../vue.js"></script>
<style type="text/css">
#app{
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<button @click="run">應(yīng)援</button>
<button @click="stop">暫停</button>
<h3>{{msg}}</h3>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"朋友朋友我愛你，就像老鼠愛大米~~~!",
timer:null //在data上定義定時(shí)器timer，默認(rèn)為null
},
methods:{
run(){
// 如果timer已經(jīng)賦值就返回
if(this.timer){return};
this.timer = setInterval(() => {
// msg分割為數(shù)組
var arr = this.msg.split('');
// shift刪除并返回刪除的那個(gè)，push添加到最后
// 把數(shù)組第一個(gè)元素放入到最后面
arr.push(arr.shift());
// arr.join('')吧數(shù)組連接為字符串復(fù)制給msg
this.msg = arr.join('');
},100)
},
stop(){
//清除定時(shí)器
clearInterval(this.timer);
//清除定時(shí)器之后，需要重新將定時(shí)器置為null
this.timer = null;
}
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中使用eslint+prettier規(guī)范與檢查代碼的方法
這篇文章主要介紹了vue項(xiàng)目中使用eslint+prettier規(guī)范與檢查代碼的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue2.x中的父組件傳遞數(shù)據(jù)至子組件的方法
這篇文章主要介紹了Vue2.x中的父組件數(shù)據(jù)傳遞至子組件的方法,需要的朋友可以參考下2017-05-05
Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實(shí)現(xiàn)
這篇文章主要介紹了Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了詳解Vue快速零配置的打包工具——parcel，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue實(shí)現(xiàn)樹形結(jié)構(gòu)增刪改查的示例代碼
其實(shí)很多公司都會有類似于用戶權(quán)限樹的增刪改查功能，本文主要介紹了vue實(shí)現(xiàn)樹形結(jié)構(gòu)增刪改查，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue3自定義dialog、modal組件的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
vue+vux?vux安裝出現(xiàn)錯(cuò)誤問題及解決
這篇文章主要介紹了vue+vux?vux安裝出現(xiàn)錯(cuò)誤問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中的el-tooltip提示黑框遮擋問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁面窗口，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04