vue setInterval定时器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑马灯</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <!-- 创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="开" @click="lang">
        <input type="button" value="关"  @click="stop">
        <h1> {
   
   { mes }}</h1>
    </div>
    <!-- 注意: 在 app实例中，如果想获取 data上的数据，或者想要调用methods中的方法，
        必须通过this.数据属性名 或 this.方法名，来进行访问，这里的this，就表示我们 new 出来的 app实例对象 -->
    <script>
         var app = new Vue({
             el:"#app",
             data:{
                 mes:'我只想给你给你宠爱，这算不算爱',
                 intid:null, //在data上定义 定时器id
             },
            //  封装方法
            //注意 app 实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把
            // 最新的数据，从data 上同步到页面中，
             methods:{
                lang(){
                    // ---------写一个定时器   然后没4秒走一轮-------
                    // var _this = this;
                    // setInterval(function(){
                    //       // 获取到第一个字符
                    // var start = _this.mes.substring(0, 1)
                    // //获取最后面所有字符
                    // var end = _this.mes.substring(1)
                    // //两者拼接起来  并赋值给this.mes   顺序不能写乱 不然出不来你想要的结果
                    // _this.mes =  end+start 
                    // },400)
                    // console.log(_this.mes)

                    //-------会实现 点击按钮，下边字会变动
                    // // 获取到第一个字符
                    // var start = this.mes.substring(0, 1)
                    // //获取最后面所有字符
                    // var end = this.mes.substring(1)
                    // //两者拼接起来  并赋值给this.mes   顺序不能写乱 不然出不来你想要的结果
                    // this.mes =  end+start 

                    //-------------------箭头函数    
                    //这一行是 直接关闭一次就开不了了
                    if (this.intid != null) return; 
                   this.intid=setInterval(() =>{
                          // 获取到第一个字符
                    var start = this.mes.substring(0, 1)
                    //获取最后面所有字符
                    var end = this.mes.substring(1)
                    //两者拼接起来  并赋值给this.mes   顺序不能写乱 不然出不来你想要的结果
                    this.mes =  end+start 
                    },400)
                    console.log(this.mes)

                },
                stop(){
                    //定义一个关闭定时器   在箭头函数 那边 this.intid =   指向定时器
                    clearInterval(this.intid)
                    //每当清除了定时器之后，需要重新把 intid置为null  
                    this.intid = null;
                }
             }
         })
    </script>
</body>
</html>
vue setInterval定时器案例

Guess you like
