vue實現跑馬燈效果

時間 2019-11-10

標籤 vue 實現馬燈效果简体版

原文原文鏈接

vue實現跑馬燈效果爲阿中哥哥應援

一、效果圖html

二、實現代碼vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑馬燈</title>
    <!-- 引入vue.js-->
    <script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="show">應援</button>
    <button @click="stop">暫停</button>
    <h3 v-text="message"></h3>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"阿中阿中勇敢飛，中華兒女永相隨~~~",
            timer:null //在data上定義定時器timer，默認爲null
        },
        methods:{
            show(){
                if(this.timer != null) return;
                this.timer = setInterval(() => {
                    //獲取到頭的第一個字符
                    let start = this.message.substring(0,1);
                    //獲取到後面的全部字符
                    let end = this.message.substring(1);
                    //從新拼接獲得新的字符串，並賦值給this.message
                    this.message = end + start;
                },300)
            },
            stop(){
                //清除定時器
                clearInterval(this.timer)
                //清除定時器以後，須要從新將定時器置爲null
                this.timer = null
            }
        }
    })
</script>
</body>
</html>

相關標籤/搜索