code show as below:
<!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>
The effect is as follows: The
message object is displayed in a loop.
Realize the core:
1) Use the setInterval function to set a timer
2) Call the mounted function of Vue to activate the timer function after the page is rendered.
The official introduction of the mounted function is as follows: 
If you do not want to automatically perform the marquee effect after the page is loaded, but use two buttons to control the start and pause of the marquee effect, the realization is as follows:
<!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>
The effect is as follows:
