Vue系列教程（五）跑马灯效果案例
程序员文章站
2022-02-19 06:34:42
...
这篇文章使用vue来制作一个跑马灯效果，下面是实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯效果</title>
</head>
<body>
<div id="app">
<input type="button" value="开始" @click="start">
<input type="button" value="结束" @click="stop">
<h4>{{msg}}</h4>
</div>
<script SRC="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '我是一个跑马灯~',
intervalId: null // 定时器Id
},
methods: {
start() {
if (this.intervalId != null) {
// 如果定时器已经开启，则不操作
return
}
this.intervalId = setInterval(() => {
// 获取到头部的第一个字符
var start = this.msg.substring(0, 1)
// 获取到后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值为this.msg
this.msg = end + start
}, 400)
},
stop() { // 停止定时器
clearInterval(this.intervalId)
// 每次清除了定时器只有，需要重新把intervalId置为null
this.intervalId = null
}
}
})
</script>
</body>
</html>
运行效果：
注意：
- 用
substring来截取字符，把第一个字符截取出来，放在最后一个位置 -
setInterval是一个定时器，这里设置的时间是400毫秒 - 在vm实例中，如果想要使用
data中的数据或者想要调用methods中的方法，必须使用this.数据属性名或this.方法名来进行访问 - vm实例会监听
data中所有数据的改变，只要数据已发生变化，就会自动把最新的数据从data上同步到页面中去，程序员只需要关心数据，不需要考虑如何重新渲染到页面 - 箭头函数的目的是让箭头函数内部的
this始终和外部的this保持一致
上一篇： 把文本框的内容复制到剪切板
下一篇： vue.js---i18n的使用