Vue.js 学习笔记四用一，二，三的知识做个跑马灯

做个简单的跑马灯效果

页面定义2个按钮，绑定2个方法。

 <div id="divApp"><input type="button" value="跑起来！" v-on:click="runhorse" />&nbsp;&nbsp;&nbsp;<input type="button" value="跑不动了" v-on:click="stophorse" /><h4>{{msg}}</h4></div>

<script>var v = new Vue({el: '#divApp',data: {msg: '我就是跑马灯跑马灯马灯马灯灯灯灯',runhorseInterval: null},methods: {//也可以这样定义方法
                runhorse() {if (this.runhorseInterval != null){return; }//定时器，400msthis.runhorseInterval = setInterval(() => {//使用this获取当前实例对象，从而获取data中的属性，methods中的方法var f1 = this.msg.substring(0, 1);var f2 = this.msg.substring(1);//Vue的实例会监听data的改变，只要发生变化，就会自动同步到页面中this.msg = f2 + f1;},400)},stophorse() {clearInterval(this.runhorseInterval);this.runhorseInterval = null;}}})</script>

需要注意的有：

　　1. 将定时器赋值给data中的属性runhorseInterval，这样在stophorse方法中可以直接用this.runhorseInterval获取到定时器，方便控制；

　　2. 在runhorse给属性runhorseInterval赋值前判断是否不为null,不为null则没有赋值的必要；

　　3. 在stophorse方法中停止定时器后，将属性runhorseInterval的值重置为null，否则再次点击启动按钮调用runhorse方法时，会过不了 !=null的验证，导致没有效果。

Vue.js 学习笔记三，一些基础指令，v-bind,v-on

Vue.js 学习笔记五常用的事件修饰符

转载于:https://www.cnblogs.com/luyShare/p/11533329.html

Vue.js 学习笔记四用一，二，三的知识做个跑马灯相关推荐

Vue.js学习笔记四
2019独角兽企业重金招聘Python工程师标准>>> 事件处理监听事件可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码. 直接把处理复杂逻辑的Jav ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...
Vue.js 学习笔记一
上手前的一些概念为啥要用Vue.js Vue.js 是目前最流行的前端框架之一,专注于视图层,容易上手. 使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定),提高渲染效率, ...
遇见 vue.js --------阿文的vue.js学习笔记（8 —1）------- 列表渲染
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...

Vue.js 学习笔记四用一，二，三的知识做个跑马灯

Vue.js 学习笔记四用一，二，三的知识做个跑马灯相关推荐

最新文章

热门文章

Vue.js 学习笔记 四 用一，二，三的知识做个跑马灯

Vue.js 学习笔记 四 用一，二，三的知识做个跑马灯相关推荐

最新文章

热门文章

Vue.js 学习笔记四用一，二，三的知识做个跑马灯

Vue.js 学习笔记四用一，二，三的知识做个跑马灯相关推荐