效果图.png
示例源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<button type="button" :title="titleContent + '12345'" @click="lang">滚动</button>
<button type="button" :title="titleContent + '12345'" @click="lang2">ES6滚动</button>
<input type="button" value="停止" v-on:click="stop"/>
</div>
<script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
message: '猥琐发育，别浪！稳住我们能赢。',
titleContent: '绑定属性的指令',
setIntervalId: null
},
methods:{
lang(){
//console.log(this.message);
var _this = this;
this.setIntervalId = setInterval(function(){
var start = _this.message.substring(0,1);
var end = _this.message.substring(1);
_this.message = end + start;
console.log(_this.message);
}, 500)
},
lang2(){
//console.log(this.message);
//var _this = this;
// =>箭头函数 保持this对象的一致
if(this.setIntervalId != null){
return;
}
this.setIntervalId = setInterval(() => {
var start = this.message.substring(0,1);
var end = this.message.substring(1);
this.message = end + start;
console.log(this.message);
}, 500)
},
stop: function(){
clearInterval(this.setIntervalId);
this.setIntervalId = null;
}
}
})
</script>
</body>
</html>
