Vue教程02(跑马灯效果案例),全套教学资料,持续更新大厂面试笔试题

本文是Vue.js教程的一部分,介绍如何创建跑马灯效果,包括绑定事件、动态截取字符串和管理定时器。同时,作者分享了个人的前端开发经验,包括在大厂的面试和工作心得,提醒自学前端开发者注重实战和简历准备。
摘要由CSDN通过智能技术生成
  • b.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;

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

2.实现


2.1 绑定事件

<input type=“button” value=“加油” @click=“lang”>

<input type=“button” value=“低调” @click=“stop”>

2.2 动态截取加定时

var vm = new Vue({

el: ‘#app’,

data: {

msg: ‘加油,小强,你最棒~~!’,

intervalId: null // 在data上定义 定时器Id

},

methods: {

lang() {

// 获取到头的第一个字符

// this

if (this.intervalId != null) return;

this.intervalId = setInterval(() => {

var start

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值