跑马灯
VUE代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 1.导入Vue包 --> <script src="../vuejs/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="跑起来" @click=run> <input type="button" value="停止" @click=stop> <h4> {{msg}} </h4> </div> <script> // 注意：在vm实例中，如果想要获取data上的数据,或者想要调用 methods 中的方法，必须通过this.数据属性名 或 this.方法名 来进行访问 // 这里的this,就表示 我们 new 出来的 VM实例对象 var vm = new Vue({ el: '#app', data: { msg: '农业产品批发管理中心-------', titleStop:null //在data上定义 定时器Id }, methods: { run() { if(this.titleStop!=null){ return; } this.titleStop=setInterval(()=> { //获取到头的第一个字符 //js substring方法 提取字符串两个下标之间的字符 var start = this.msg.substring(0, 1); //end是去除下标为1的字符的字符串 var end = this.msg.substring(1); this.msg = end + start; //注意：VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据， //从data上同步到页面中去;[好处：程序员只需要关心数据,不需要考虑如何重新渲染dom页面] }, 400) }, stop(){ //停止定时器 clearInterval(this.titleStop); //每当清除了定时器之后，需要重新把titleStop设为null this.titleStop=null; } }, }) //分析: //1.给按钮绑定一个点击事件 v-on @ // 2. 在按钮的事件处理函数中,写相关的逻辑代码: 拿到msg 字符串， // 然后调用字符串的substring 来进行字符串的截取操作, 把第一个字符截取出来,放到最后一个位置即可。 // 3.为了实现点击下按钮,自动截取的功能,需要把步骤2放进去 </script> </body> </html>