Vue学习（四）之跑马灯案例

最新推荐文章于 2024-05-07 03:18:09 发布

LH-sw

最新推荐文章于 2024-05-07 03:18:09 发布

阅读量147

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_41827712/article/details/117635870

版权

Vue.js 箭头函数定时器数据绑定跑马灯效果

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

跑马灯案例
其中需要注意的是箭头函数setInterval(()=>，内部的this指向了外部函数

<!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>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
    <!-- 创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
        <h4>{{msg}}</h4>

    </div>
    <script>
        //注意：在vm实例中，如果想要获取data上的数据，或者想要调用methods中的犯法，必须通过
  //      this.数据属性名
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'猥琐发育，别浪~~！',
                intervalId:null
            },
            methods:{
                lang(){
                 //   console.log(this.msg)
                 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
                 },400)

                    //注意：vm实例，会监听自己身上data中的所有数据的改变，只要数据发生变化，
                    //就会自动把新的数据，从data上同步到页面中去。
                },
                stop(){
                    //停止定时器
                    clearInterval(this.intervalId)
                    //每当清楚了定时器后，需要重新把intervalIdf复制为null
                    this.intervalId=null;

                }
            }
        })



        //分析：
        //1.给【浪起来】按钮，绑定一个点击事件 v-on @
        //2.在按钮的时间处理函数中，写相关的业务逻辑代码，拿到msg字符串，
        //然后，调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可
        //3.为了实现点击以下按钮，自动截取的功能，需要把2步骤中的代码，放到一个定时器中去

    </script>



</body>
</html>