Vue 使用計時器實現(xiàn)跑馬燈效果的實例代碼
更新時間：2019年07月11日 08:46:02 作者：Tynam.Yang
這篇文章主要介紹了Vue 使用計時器實現(xiàn)跑馬燈效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
Vue 使用計時器實現(xiàn)跑馬燈效果，代碼如下所示：
<!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">
<script src="../Vue/vue.js"></script>
<link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
<title>跑馬燈</title>
<style type="text/css">
#app button {
outline: none;
}
</style>
</head>
<body>
<div id="app" style="margin: 20px">
<button class="btn btn-info" @click='lang'>飛的速度</button>
<button class="btn btn-info" @click='stop'>猥瑣發(fā)育</button>
<div>
<h4 style="color: red">{{msg}}</h4>
<img src="buxiang.jpeg" alt="">
</div>
</div>
<script>
var ve = new Vue({
el: '#app',
data: {
msg: '只有飛速的旋轉(zhuǎn)，才可以止住為的淚水，忘記你的模樣。。。',
intervalId: null,
},
methods: {
// 動起來
lang() {
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
// 獲取第一個字符
var start = this.msg.substring(0, 1)
// 獲取第一個字符后面的所有字符
var end = this.msg.substring(1)
this.msg = end + start
}, 300)
},
// 停止運動
stop() {
clearInterval(this.intervalId)
// 重新賦值null
this.intervalId = null
}
}
})
</script>
<script src="lib/jquery/jquery-3.4.1.js"></script>
<script src="lib/bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
效果
總結(jié)
以上所述是小編給大家介紹的Vue 使用計時器實現(xiàn)跑馬燈效果的實例代碼 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了解決vant-UI庫修改樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue3優(yōu)雅的使用element-plus的dialog,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本篇文章主要介紹了如何實現(xiàn)一個簡單的 vuex，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了了解VUE的render函數(shù)的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Vue父組件和子組件之間數(shù)據(jù)傳遞和方法調(diào)用
vue組件在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質(zhì)，子向父的介質(zhì)是自定義事件，父向子的介質(zhì)是props中的屬性。2022-12-12
vue填坑之webpack run build 靜態(tài)資源找不到的解決方法
今天小編就為大家分享一篇vue填坑之webpack run build 靜態(tài)資源找不到的解決方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-router鉤子函數(shù)實現(xiàn)路由守衛(wèi)
這篇文章主要介紹了vue-router鉤子函數(shù)實現(xiàn)路由守衛(wèi)，對vue感興趣的同學，可以參考下2021-04-04
今天小編就為大家分享一篇關(guān)于vue項目打包之后背景樣式丟失的解決方案，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
本文主要介紹了vue3.0+vant3.0快速搭建項目的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了vue-iview動態(tài)新增和刪除的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06