setInterval(() =>{
var start=vv.msg.substring(0,1)
var end =vv.msg.substring(1)
console.log(vv.msg)
console.log(end)
vv.msg=end+start
},400)
也相当于
setInterval(function(){
var start=this.msg.substring(0,1)
var end =vv.msg.substring(1)
console.log(vv.msg)
console.log(end)
vv.msg=end+start
},400)
注意:下面那个如果要用this要注意this的嵌套,
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'欢迎学习Vue',
msg2:'佳佳'
}
});
var vv =new Vue({
el:'.paoma',
data:{
msg:'跑马灯啊浪浪浪-----',
},
methods:{
go(){
// setInterval(function(){
// var start=vv.msg.substring(0,1)
// var end =vv.msg.substring(1)
// console.log(vv.msg)
// console.log(end)
// vv.msg=end+start
// },400)
//
//_this=this
// setInterval(function(){
// var start=vv.msg.substring(0,1)
// var end =_this.msg.substring(1)
// console.log(vv.msg)
// console.log(end)
// _this.msg=end+start
// },400)
setInterval(() =>{
var start=this.msg.substring(0,1)
var end =this.msg.substring(1)
console.log(this.msg)
console.log(end)
this.msg=end+start
},400)
},
}
});
// document.getElementsByTagName('')
// document.getElementById()
</script>
完整的关闭打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p v-cloak>{{msg2}}</p>
</div>
<div class="paoma">
<input type="button" value="浪起来" :title="msg" v-on:click="go">
<input type="button" value="停" @click="stop">
<p v-cloak>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'欢迎学习Vue',
msg2:'佳佳'
}
});
var vv =new Vue({
el:'.paoma',
data:{
msg:'跑马灯啊浪浪浪-----',
interval:null,
},
methods:{
go(){
// setInterval(function(){
// var start=vv.msg.substring(0,1)
// var end =vv.msg.substring(1)
// console.log(vv.msg)
// console.log(end)
// vv.msg=end+start
// },400)
//
//
if(this.interval !==null)
{
return;
}
this.interval=setInterval(() =>{
var start=vv.msg.substring(0,1)
var end =vv.msg.substring(1)
console.log(vv.msg)
console.log(end)
vv.msg=end+start
},400)
},
stop(){
clearInterval(this.interval)
this.interval = null;
}
}
});
// document.getElementsByTagName('')
// document.getElementById()
</script>
</body>
</html>