Vue實(shí)現(xiàn)簡(jiǎn)單跑馬燈特效
更新時(shí)間：2022年05月18日 16:14:03 作者：pink-0614
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單跑馬燈特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡(jiǎn)單跑馬燈特效的具體代碼，供大家參考，具體內(nèi)容如下
效果：
點(diǎn)擊按鈕讓文字動(dòng)起來(lái)，點(diǎn)擊停止按鈕讓文字停止
知識(shí)點(diǎn)：
- substring(字符串截取)
- setInterval定時(shí)器(控制文字移動(dòng)速度)
- clearInterval清除定時(shí)器(控制文字停止)
代碼展示：
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<script src="vue.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?<style type="text/css">
?? ??? ??? ?#app{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 120px;
?? ??? ??? ??? ?background-color: pink;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?border-bottom: 1px solid #cfccc5;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="app">
?? ??? ??? ?<h1>{{text}}</h1><br>
?? ??? ??? ?<button @click="piao()">飄</button>
?? ??? ??? ?<button @click="ding()">定住</button>
?? ??? ?</div>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:"#app",
?? ??? ??? ??? ?data:{
?? ??? ??? ??? ??? ?text:"跑馬燈效果！",
?? ??? ??? ??? ??? ?flag:null
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods:{
?? ??? ??? ??? ??? ?piao(){
?? ??? ??? ??? ??? ??? ?// 如果ind已經(jīng)被賦值了就返回
?? ??? ??? ??? ??? ??? ?if(this.flag){return};
?? ??? ??? ??? ??? ??? ?this.flag = setInterval(()=>{
?? ??? ??? ??? ??? ??? ??? ?// 截取首個(gè)字符
?? ??? ??? ??? ??? ??? ??? ?var head = this.text.substring(0,1);
?? ??? ??? ??? ??? ??? ??? ?// 截取除了首個(gè)字符外的所有字符
?? ??? ??? ??? ??? ??? ??? ?var foot = this.text.substring(1);
?? ??? ??? ??? ??? ??? ??? ?// 拼接起來(lái)
?? ??? ??? ??? ??? ??? ??? ?this.text = foot + head;
?? ??? ??? ??? ??? ??? ?},100)
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?ding(){
?? ??? ??? ??? ??? ??? ?// 清除定時(shí)器
?? ??? ??? ??? ??? ??? ?clearInterval(this.flag);
?? ??? ??? ??? ??? ??? ?// 把flag置空 不然下一次點(diǎn)擊文字不會(huì)移動(dòng)
?? ??? ??? ??? ??? ??? ?this.flag=null;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?</script>
?? ?</body>
</html>效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能（流程詳解）
無(wú)論是移動(dòng)端還是pc端登錄或者注冊(cè)界面都會(huì)見(jiàn)到手機(jī)驗(yàn)證碼登錄這個(gè)功能，輸入手機(jī)號(hào)，得到驗(yàn)證碼，這篇文章主要介紹了基于vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能,需要的朋友可以參考下2019-12-12
詳解Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的解決方案
這篇文章主要介紹了Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的解決方案,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼
這篇文章主要介紹了 Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼，文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下2018-04-04
本篇文章給大家分享了vue2單元測(cè)試環(huán)境搭建的詳細(xì)步驟，對(duì)此有需要的朋友參考學(xué)習(xí)下。2018-05-05
這篇文章主要介紹了vue3.0-monaco組件封裝存檔代碼解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
下面小編就為大家分享一篇mint-ui 時(shí)間插件使用及獲取選擇值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue動(dòng)態(tài)路由實(shí)現(xiàn)多級(jí)嵌套面包屑的思路與方法
在實(shí)際項(xiàng)目中我們會(huì)碰到多層嵌套的組件組合而成，比如我們常見(jiàn)的面包屑導(dǎo)航，下面這篇文章就來(lái)給大家介紹關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由多級(jí)嵌套面包屑的思路與方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
vue中路由跳轉(zhuǎn)不計(jì)入history的操作
這篇文章主要介紹了vue中路由跳轉(zhuǎn)不計(jì)入history的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue.js實(shí)現(xiàn)價(jià)格格式化的方法
這里分享一個(gè)常用的價(jià)格格式化的一個(gè)方法，在電商的價(jià)格處理中非常的實(shí)用，具體實(shí)現(xiàn)代碼大家參考下本文2017-05-05