Vue学习之路第七篇：跑马灯项目实现
前面六篇讲解了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的基础知识。
学编程一定要多动手，常练习，勤思考！
每天进步一点点！
Vue学习之路第七篇：跑马灯项目实现的更多相关文章
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- vue学习指南：第七篇(详细) - Vue的 组件通信
Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用 缩写是(:) 1.创建子组件,在src/ ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- Vue学习之路第五篇：v-bind
v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...
- Vue学习之路第四篇：v-html指令
上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...
- Vue学习之路第十七篇：全局过滤器的使用
1.过滤器 ①:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 Ja ...
随机推荐
- P1421 小玉买文具
... 题目描述 班主任给小玉一个任务,到文具店里买尽量多的签字笔.已知一只签字笔的价格是1元9角,而班主任给小玉的钱是a元b角,小玉想知道,她最多能买多少只签字笔呢. 输入输出格式 输入格式: 输入 ...
- 训练1-U
输入2个正整数A,B,求A与B的最小公倍数. Input 2个数A,B,中间用空格隔开.(1<= A,B <= 10^9) Output 输出A与B的最小公倍数. Sample Input ...
- redis 参数配置总结
redis.conf 配置项说明如下 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时, ...
- BA-闭式冷却塔系统
- Ubuntu16.04编译cmake源码
编译版本:cmake-3.8.0-rc2 为了能够编译出ccmake和cmake-gui,首先需要安装libncurses5-dev sudo apt install libncurses5-dev ...
- HDU 5045 DP+状压
2014 ACM/ICPC Asia Regional Shanghai Online 给出N个人做M道题的正确率,每道题仅仅能由一个人做出,而且当全部人都做出来且仅做出一道题时,做过题的人才干够继续 ...
- 可编程数据平面将OpenFlow扩展至电信级应用（二）
可编程数据平面将OpenFlow扩展至电信级应用(二) 案例:基于WinPath网络处理器的电信极OpenFlow (CG-OF)client实现 作者:Liviu Pinchas, Tao Lang ...
- 基于nginx的TCP Proxy实现数据库读写分离
nginx非常早就支持tcp proxy.可是一直不知道其使用,近期在nginx blog上看见了.一些实践者将其运用到数据库訪问的负载均衡以及实现读写分离,来提高数据库的吞吐量,这里我不会讲详细的搭 ...
- hdoj--1051--Wooden Sticks(LIS)
Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- hdoj--5240--Exam（）
Exam Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...