vue跑马灯

最新推荐文章于 2024-08-22 02:07:07 发布

乐多

最新推荐文章于 2024-08-22 02:07:07 发布

阅读量572

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44769592/article/details/97016120

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>macvuetest</title>
    <script src="../vue.min.js"></script>
  </head>
  <style>
  
  </style>
  <body>
      <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
        <p>{{msg}}</p>
      </div>
      <script>
        var vm= new Vue({
            el:'#app',//找到控制区
            data:{
                    msg:'猥琐发育别浪',
                    intervalId:null//定时器id
                },
            methods:{
              //es6 写法  方法名变成属性名
              //lang运行前先判断setinterval是否已经开启 即判断状态是否为null
                
                lang(){
                  if(this.intervalId!=null) return;
                  this.intervalId=setInterval(()=>{
                      var start=this.msg.substring(0,1)
                      //获取后面所有字符
                      var end=this.msg.substring(1)
                      //得到字符串并赋值
                      this.msg=end+start
                  },500)
                },
                stop(){
                  //clearinterval的参数是setinterval的返回值
                  clearInterval(this.intervalId);
                  this.intervalId=null;
                }
            }  
        });
      //浪起来 绑定一个点击事件
      //在按钮的事件处理函数中写相关业务逻辑代码：
      //拿到msg字符串 调用字符串的substring 来进行字符串的截取
      //截取第一个字符放到最后一个 每1000ms执行一次
      </script>
    </script>
  </body>
</html>