前言：

在制作当前走马灯之前需要了解Vue的基础用法

如果已经学完了Vue的基础用法就可以开始制作走马灯了

首先我们先把网页的静态布局以及基本的调用写处理

 <head><meta charset="utf-8"><title></title></head><body><!-- 创作一个控制区 --><div id="app"><input type="button" value="浪起来" @click="lang"><input type="button" value="低调"><h4>{{msg}}</h4></div><!-- 导入Vue包 --><script src="vue.js"></script><script>//注意:在VM实例中,如果想要获取data上的数据,或者调用methods中的方法,必须通过this.数据属性名 或 this.方法名来进行访问,这里的this,就表示我们new处理的VM实例对象var vm = new Vue({el:'#app',data:{msg:'猥琐发育，别浪~~'},methods:{lang(){console.log(this.msg)}}})</script></body>
</html>

分析：

1.给【浪起来】按钮，绑定一个点击事件 v-on @

2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的substring来简写字符串的截取操作，把第一个字符截取处理，放到最后一个位置即可；

3.为了实现点击按钮，自动截取的功能，需要把2步骤的代码，放到一个定时器中去；

<html><head><meta charset="utf-8"><title></title></head><body><!-- 创作一个控制区 --><div id="app"><input type="button" value="浪起来" @click="lang"><input type="button" value="低调" @click="stop"><h4>{{msg}}</h4></div><!-- 导入Vue包 --><script src="vue.js"></script><script>//注意:在VM实例中,如果想要获取data上的数据,或者调用methods中的方法,必须通过this.数据属性名 或 this.方法名来进行访问,这里的this,就表示我们new处理的VM实例对象var vm = new Vue({el:'#app',data:{msg:'猥琐发育，别浪~~',intervalId:null,//在data上定义定时器Id},methods:{lang(){// console.log(this.msg)//当intervalId的值不为null时不再运行下面动作if(this.intervalId != null)returnthis.intervalId = setInterval(() => {//每过0.4s运行一次//获取到头的第一个字符var start =this.msg.substring(0,1)//获取到后面的所有字符var end = this.msg.substring(1)//重新拼接得到新的字符串,并赋值给this.msgthis.msg = end + start},400)//注意:VM实例,会监听到自己身上data中所有数据的改变,只要数据一发生变化,就会自动把最//新的数据,从data上同步到页面中去;[好处：程序员只需要关心数据，不需要考虑如何重新渲//染DOM页面]},stop(){//停止定时器clearInterval(this.intervalId)//每当清除了定时器之后,需要重新把intervalId重置为nullthis.intervalId = null;}}})</script></body>
</html>

这样一个用Vue制作的简单走马灯就完成了~(^ _ ^)∠※

利用Vue制作一个简单的走马灯相关推荐

利用vue制作一个简单的信息登记表 ---添加删除和修改
添加信息和按照索引值删除信息 (1)登记表的样式: (2)大致思路把输入框里的姓名,年龄,性别双向绑定data里对应的变量,变量赋初值皆为空(性别赋初值为男).是否同意协议,默认不同意:给提交按钮绑 ...
用计算机怎么做成绩表,利用Excel制作一个简单的学生成绩表.doc
利用Excel制作一个简单的学生成绩表教学设计表学科信息技术授课年级八年级学校教师姓名章节名称初中信息技术八年级上册第7课(第1节)计划学时1学时学习内容分析学习Excel的基础知识, ...
利用EasyDL制作一个简单的图片识别小项目
主要是利用EasyDL制作一个简单的傻瓜式猫狗图片识别,利用EasyDL,只需要几步简单的点击即可 *主要的步骤: 1.准备数据 2.训练模型 3.部署 4.H5 * 1.首先创建两个文件夹cat和d ...
pr如何跳到关键帧_PR教程如何利用pr制作一个简单的动画
Adobe Premiere Pro简称PR,是一款非常不错的视频制作编辑软件,如何如何利用pr制作一个简单的动画,这里小编为大家带来了pr动画制作教程--利用pr制作动画,一起来学习一下吧! Ado ...
利用DW制作一个简单的文字logo
这是利用DW设计一个简单的文字logo方案 1 建立一个HTML5 2用strong标签写出文字Google 3在style标签下利用font size定义字号 4根据CSS设定指定参数效果如下:
利用table制作一个简单的个人简历
table的曾经在div没有出现之前,table曾是做网页的中坚力量.记得在开始学网页的时候,div是神马,我不造呀!做网页还用div吗,就只用table就可以了,各种表格嵌套加嵌套,一个网页就拼凑 ...
利用js制作一个简单的QQ农场小游戏
html文件代码 <!DOCTYPE html> <html><head><meta charset="utf-8" />< ...
vue制作一个简单的导航栏
1:HTML <ul><li v-for="(item,index) of itemList" :class="current===index ? 'a ...
如何利用laragon框架制作一个简单的应用？
如何利用laragon框架制作一个简单的应用? 一.搭建环境 1. 安装Laragon 1.1 打开安装包用的语言选择自己习惯用的语言 1.2 选择安装地址 1.3 选择Next,开始install ...
使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...

利用Vue制作一个简单的走马灯

前言：

在制作当前走马灯之前需要了解Vue的基础用法

如果已经学完了Vue的基础用法就可以开始制作走马灯了

首先我们先把网页的静态布局以及基本的调用写处理

分析：

1.给【浪起来】按钮，绑定一个点击事件 v-on @

2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的substring来简写字符串的截取操作，把第一个字符截取处理，放到最后一个位置即可；

3.为了实现点击按钮，自动截取的功能，需要把2步骤的代码，放到一个定时器中去；

这样一个用Vue制作的简单走马灯就完成了~(^ _ ^)∠※

利用Vue制作一个简单的走马灯相关推荐

最新文章

热门文章