<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<script src="vue.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?<style type="text/css">
?? ??? ??? ?#app{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 120px;
?? ??? ??? ??? ?background-color: pink;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?border-bottom: 1px solid #cfccc5;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="app">
?? ??? ??? ?<h1>{{text}}</h1><br>
?? ??? ??? ?<button @click="piao()">飄</button>&nbsp;&nbsp;&nbsp;
?? ??? ??? ?<button @click="ding()">定住</button>
?? ??? ?</div>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:"#app",
?? ??? ??? ??? ?data:{
?? ??? ??? ??? ??? ?text:"跑馬燈效果！",
?? ??? ??? ??? ??? ?flag:null
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods:{
?? ??? ??? ??? ??? ?piao(){
?? ??? ??? ??? ??? ??? ?// 如果ind已經(jīng)被賦值了就返回
?? ??? ??? ??? ??? ??? ?if(this.flag){return};
?? ??? ??? ??? ??? ??? ?this.flag = setInterval(()=>{
?? ??? ??? ??? ??? ??? ??? ?// 截取首個字符
?? ??? ??? ??? ??? ??? ??? ?var head = this.text.substring(0,1);
?? ??? ??? ??? ??? ??? ??? ?// 截取除了首個字符外的所有字符
?? ??? ??? ??? ??? ??? ??? ?var foot = this.text.substring(1);
?? ??? ??? ??? ??? ??? ??? ?// 拼接起來
?? ??? ??? ??? ??? ??? ??? ?this.text = foot + head;
?? ??? ??? ??? ??? ??? ?},100)
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?ding(){
?? ??? ??? ??? ??? ??? ?// 清除定時器
?? ??? ??? ??? ??? ??? ?clearInterval(this.flag);
?? ??? ??? ??? ??? ??? ?// 把flag置空 不然下一次點擊文字不會移動
?? ??? ??? ??? ??? ??? ?this.flag=null;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?</script>
?? ?</body>
</html>

效果：