1、跑马灯效果
说明：单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动
2、完整代码 (注意：代码中需要引入vue.js文件，这个文件自己根据目录位置引入，具体位置代码中有注释)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>跑马灯</title><!-- 引入vue.js文件--><script src="../vue.js"></script><style type="text/css">#app{padding: 20px;}</style> </head> <body> <div id="app"><button @click="run">应援</button><button @click="stop">暂停</button><h3>{{msg}}</h3> </div> <script>new Vue({el:"#app",data:{msg:"朋友朋友我爱你，就像老鼠爱大米~~~!",timer:null //在data上定义定时器timer，默认为null},methods:{run(){// 如果timer已经赋值就返回if(this.timer){return};this.timer = setInterval(() => {// msg分割为数组var arr = this.msg.split('');// shift删除并返回删除的那个，push添加到最后// 把数组第一个元素放入到最后面arr.push(arr.shift());// arr.join('')吧数组连接为字符串复制给msgthis.msg = arr.join('');},100)},stop(){//清除定时器clearInterval(this.timer);//清除定时器之后，需要重新将定时器置为nullthis.timer = null;}}}) </script> </body> </html>
