VUE繫結事件案例—文字跑馬燈效果

技術標籤：vue

VUE繫結事件案例—文字跑馬燈效果
要實現的效果：點選【浪起來】的時候，文字逐漸向左移動一個單位（迴圈）；
點選【猥瑣發育】，文字停止移動。
在這裡插入圖片描述
程式碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>文字跑馬燈</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="浪起來" @click="lang">
        <input type 
="button" value="猥瑣發育" @click="stop">
        <h4> {{mess}} </h4>
    </div>


</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            mess: "猥瑣發育，別浪！！！",
            timer:""
        } 
,
        methods: {
            lang() {

                if(this.timer!="")  return;  //每次被點選了，就清除定時器，避免多次點選，越跑越快
                this.timer = setInterval(() => {
                    const start = this.mess.substring(0, 1)//獲取到第一個字元
                    const end = this.mess.substring(1)//獲取到第一個後面的字元
                    this.mess = end + start//重新組成新的資料
                }, 300)
            },
            stop() {
              clearInterval(this.timer);
              this.timer=""  //每次清除了定時器，就讓定時器重新賦值為空
            }
        }
    })
</script>

</html>

VUE繫結事件案例—文字跑馬燈效果

VUE繫結事件案例—文字跑馬燈效果

javascript實現文字跑馬燈效果

上下滾動的文字跑馬燈效果

【安卓】實現文字跑馬燈效果(附as配置)

解決Vue router-link繫結事件不生效的問題

vue 通過繫結事件獲取當前行的id操作

vue使用v-html渲染的標籤，如何繫結事件？

vue 繫結物件,陣列之資料無法動態渲染案例詳解

vue 中事件繫結事件-引數傳遞且v-onclick的使用

Java使用自定義註解實現為事件源繫結事件監聽器操作示例

jquery繫結事件 bind和on的用法與區別分析

Vue實現跑馬燈效果

Js和VUE實現跑馬燈效果

vue實現簡單跑馬燈效果

微信小程式實現簡單文字跑馬燈

Unity Button繫結事件的方法

js 或 .addEventListener 解決動態繫結事件時不能傳參的問題

文字跑馬燈 animation

addEventListener繫結事件

高德地圖marker事件監聽-高德地圖marker繫結事件就執行了[解決立即執行]

VUE繫結事件案例—文字跑馬燈效果

相關推薦