代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<p>{
{message}}</p>
<p v-text="message"></p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: "Hello World!我来了~"
},
mounted() {
this.show()
},
methods: {
show() {
setInterval( ()=> {
var start = this.message.substring(0, 1)
var end = this.message.substring(1)
this.message = end + start
}, 400)
}
}
})
</script>
</html>
效果如下：
message对象循环展示。
实现核心：
1）利用setInterval函数设置一个定时器
2）调用Vue的mounted函数，在页面渲染完毕后激活定时器函数。
有关mounted函数官方介绍如下：
如果不想在页面加载完成后自动进行跑马灯效果，而是通过两个按钮控制跑马灯效果的开始与暂停，实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<p>{
{message}}</p>
<p v-text="message"></p>
<input type="button" name="" id="" value="开始" v-on:click="show()" />
<input type="button" name="" id="" value="停止" v-on:click="stop()" />
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: "Hello World!我来了~",
intervalId: null
},
methods: {
show() {
if(this.intervalId == null)
this.intervalId = setInterval( ()=> {
var start = this.message.substring(0, 1)
var end = this.message.substring(1)
this.message = end + start
}, 400)
},
stop(){
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})
</script>
</html>
实现效果如下：
