vue製作跑馬燈效果

技術標籤：vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js" 
></script>
</head>
<body>
    <div id="app">
        <input type="button" value="啟動" v-on:click="start">
        <input type="button" value="停止" @click="stop"><!--v-on的縮寫@-->
        < 
p>{{msg}}</p>
    </div>


    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'歡迎光臨Vue世界',
                intervalid:null /// 把他設定為一個全部變數  在不同的函式中都可以使用
            },
            methods:{
             start:function(){

            //    setInterval(function(){ 

            //        var first = this.msg.substring(0,1)//獲取第一個字元
            //        var end = this.msg.substring(1)//獲取從第二個字元以後的內容
            //    },400)
            
            if(this.intervalid != null)return;//直接return  退出這個函式 不執行下面的程式碼

            this.intervalid = setInterval( () => {  //ES6箭頭函式  箭頭函式的this永遠指向其父作用域
                   var first = this.msg.substring(0,1)//獲取第一個字元
                  // console.log(first)
                   var end = this.msg.substring(1)//獲取從第二個字元以後的內容
                  // console.log(end)
                   this.msg  =  end + first
               },400)

    
            
             },
             stop(){
                 clearInterval(this.intervalid)//停止定時器
                 this.intervalid = null
             }
            }

            //  注意： VM例項 會監聽自己data中的所有資料  只要data中的資料一發生改變  就會自動同步到頁面的資料中 
        })
    </script>
</body>
</html>

ctrl+shift+p 選擇在這裡插入圖片描述
在瀏覽器中輸入localhost+本html檔案的相對路徑即可訪問

vue製作跑馬燈效果

vue製作跑馬燈效果

Vue實現跑馬燈效果

Js和VUE實現跑馬燈效果

vue實現簡單跑馬燈效果

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

vue實現簡單的跑馬燈效果

Vue實現跑馬燈簡單效果

JS實現橫向跑馬燈效果程式碼

android使用TextView實現跑馬燈效果

javascript實現文字跑馬燈效果

JQ跑馬燈效果

原生小程式封裝跑馬燈效果

03-用基本指令實現跑馬燈效果

css3 單行文字/多行不同寬度文字的跑馬燈效果實現

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

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

公告欄的跑馬燈效果

3.基本控制元件跑馬燈效果的TextView

Vue實現跑馬燈樣式文字橫向滾動

marquee一行程式碼實現滾動跑馬燈效果無需js

vue製作跑馬燈效果

相關推薦