VUE第二天(制作跑马灯效果)

先来练习一下前面看的一些基础代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day2</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="n in 9">
            <b v-for="m in n">
                {{m}}*{{n}}={{m*n}}
            </b>

        </div>
    </div>
    <script>
        new Vue({
            el:'#app'
        })
    </script>
</body>
</html>
这是v-for的循环语句99乘法表

 <!--正片开始-->

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day2</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="Move" @click='Move'>
        <input type="button" value="Stop" @click='Stop'>
        <h1>{{ msg }}</h1>
    </div>
    <pre>
        <h2>
            1,用v-on给move按钮绑定时间
            2.在按钮的时间处理函数中，写入相关方法或逻辑代码
            3.获取msg字符串，进行截取操作调用字符串的substring的方法，进行字符串的截取放到最后的位置
            4.为了实现循环点击按钮自动截取的功能需要把2.放入一个定时器中
        </h2>
    </pre>
    <!-- 正片开始 -->
    <script>
        var vm = new Vue(
            /*
                在vm实列中，如果我们想要调用data中的数据或者想要调用methods中的方法必须通过 this. 数据属性名
                或this.方法名来进行访问，这里的this表示new出来的vm实例
            */
            {
                el:'#app',
                data:{
                    msg:'hello Vue I like Vue ',
                    intervalId:null//在data上面定义一个计时器
                },
                methods:{
                    Move(){
                        if(this.intervalId) return;
                        this.intervalId = setInterval(() =>{        //箭头函数内部的this指针和外部的this始终保持一致
                            var start = this.msg.substring(0,1)
                            var end = this.msg.substring(1)
                            this.msg = end + start;
                        }, 400)//定时器每隔400毫秒运行一次setIntervalId内部的函数
                    },
                    Stop(){
                            clearInterval(this.intervalId)
                            /*每当clear清除之后将重新赋值为null，否则再次点击定时器开关将会出问题*/
                            this.intervalId = null

                    }
                }
            }
        )
    </script>
</body>
</html>

 

posted @ 2020-03-17 22:29  社会主义核心价值观  阅读(231)  评论(0)    收藏  举报
Live2D