前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目。
学前准备:
需要掌握定时器的两个函数:setInterval和clearInterval以及作用域的概念
上代码,大家可以复制下来直接运行看看效果(vue.min.js 第一篇有下载链接):
<!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>跑马灯效果</title> <script type="text/javascript" src="js/vue.min.js"></script> </head> <body> <!-- 页面部分 --> <div id="app"> <button @click="go()">开始</button> <button @click="stop()">停止</button> <p>{{ msg }}</p> </div> <!-- JS部分 --> <script type="text/javascript"> var vm = new Vue({ el : "#app", data : { msg : ‘好好努力,我的奥迪s5~‘,//跑马灯文字 interObj : null //定时器对象 }, methods : { go(){ if(this.interObj == null){ _this = this this.interObj = setInterval(function(){ let start = _this.msg.substring(0,1); let end = _this.msg.substring(1); _this.msg = end + start; },1000); } }, stop(){ clearInterval(this.interObj); this.interObj = null; } } }); </script> </body> </html>
代码分析:
页面上定义两个按钮,分别用来触发跑马灯效果和停止跑马灯效果。js部分分别定义了两个对象以及对应的方法。
1、go方法主要是使用定时器,每次把msg文本分成两个部分start和end,start为msg下标为0的字符串,end为msg下标为1至结尾的字符串,然后把end和start拼接为一个新的字符串赋值给msg,从而实现类似于跑马灯的效果。
2、end方法用来清除定时器,终止跑马灯效果。
3、methods方法里想要使用datat里的数据,需要使用关键字:this,但是这里要注意this作用域的范围。
4、大家可以看到每次改变msg文本内容的时候都会立刻反应在页面上,从侧面可以看出Vue响应式的特点。
内容还是很简单的,主要是用来练习基础的Vue知识。
学编程一定要勤动手,多练习,多思考!
每天进步一点点!
原文地址:https://www.cnblogs.com/shibin90/p/10320216.html
时间: 2024-09-30 22:19:30