逻辑:

    • 使用字符串方法substring实现文本的更改 =>第一个字符放在最后,重复操作
    • 使用定时器功能实现自动运行
      1. <div id="app">
      2. <input type="button" value="开始" @click="start">
      3. <input type="button" value="停止" @click="stop">
      4. <h3>{{msg}}</h3>
      5. </div>
      6. <script>
      7. var app = new Vue({
      8. el:"#app",
      9. data() {
      10. return {
      11. msg:"我是一个能滚动的弹幕~~",
      12. intervalId:null
      13. }
      14. },
      15. methods: {
      16. start(){
      17. if(this.intervalId != null) return;
      18. //开启定时器
      19. // 箭头函数解决this指向
      20. this.intervalId=setInterval(() => {
      21. //获取第一个字符
      22. var start = this.msg.substring(0,1)
      23. //获取后面的字符
      24. var end = this.msg.substring(1)
      25. //拼接
      26. this.msg = end+start
      27. }, 300);
      28. },
      29. stop(){
      30. //清除定时器
      31. clearInterval(this.intervalId)
      32. this.intervalId=null;
      33. }
      34. },
      35. })
      36. </script>