欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)跑馬燈簡(jiǎ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)跑馬燈簡(jiǎn)單效果的具體代碼，供大家參考，具體內(nèi)容如下

1、跑馬燈效果

說(shuō)明：?jiǎn)螕?應(yīng)援"按鈕文字向左飄動(dòng),再單擊"暫停"按鈕停止當(dā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:"朋友朋友我愛(ài)你，就像老鼠愛(ài)大米~~~!",
            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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論