<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<!-- 創建一個要控制的區域 -->
<div id="app">
<h4>{{ msg }}</h4>
<input type="button" value="move" @click="move">
<input type="button" value="stop" @click="stop">
</div>
<!-- 注意：vm實例會監聽自己身上data中所有數據的改變，只要數據一發生變化，就會自動把最新的數據，從data上同步到頁面中去，程序員只需要關心數據，不需要考慮重新渲染數據
給第一個按鈕綁定一個點擊事件
在按鈕的事件處理函數中，寫相關的業務邏輯代碼，拿到msg字符串
然後調用字符串的substring來進行字符串的截取操作，把第一個字符截取出來
，放到最後一個位置
爲了實現點擊下按鈕自動截取的功能，需要把2步驟中的代碼，放到一個定時器中去 -->
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "今天天氣真好~~",
intervalId:null
},
methods: {
move() { //es6寫法，省略了function
// 1.在vm實例中，如果想要獲取data上的數據，或者想要調用methods中的方法，必須通過
// this.數據屬性名或this.方法名來訪問，這裏的This，就表示我們new出來的vm實例對象
// console.log(this.msg);
if(this.intervalId!=null)return;//如果不等於Null 說明定時器已經開啓了，return出去
this.intervalId=setInterval( ()=> {//使用箭頭函數，內部this和外部this保持一致的
var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start
}, 400)
},
stop(){
clearInterval(this.intervalId)
this.intervalId=null
}
}
})
</script>
</body>
</html>
Vue——04——跑馬燈效果案例
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
vue在history的路由模式下，刷新後界面報404
需要配置下nginx，位置在/conf/vhosts/*.conf，將當前目錄下的所有conf都修改一下最好 server { listen 80; server_name agwenb