<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button @click="active">滚动</button>
<button @click="pause">停止</button>
<h4>{
{msg}}</h4>
</div>
<script src="vue.js"></script>
<script>
// vm实例中调用data的数据,或者调用methods的方法，必须通过this调用 this.属性名 / this.方法名
var vue = new Vue({
el:'#app',
data:{
msg: '今晚你吃了吗',
intervalId: null
},
methods:{
active() {
// 定时器
// 箭头函数内部this和外部一致，都指向vm实例
// 防止定时器一直在执行，越来越快
if(this.intervalId != null) return;
this.intervalId = setInterval(() => {
// 获取到第一个字符
var start = this.msg.substring(0, 1)
// 获取到后面的字符
var end = this.msg.substring(1)
this.msg = end + start
}, 400)
// console.log(this.msg)
},
pause() {
clearInterval(this.intervalId)
this.intervalId = null
}
}
})
// 分析:
// 1.给按钮绑定事件
// 2.在按钮事件处理函数中，写入相关的业务逻辑代码： 拿到msg字符串，然后
// 调用字符串的substring来截取字符串， 把第一个字符串截取出来放到最后一个
// 3.为了实现点击后自动截取， 需要吧步骤2放入到定时器去
</script>
</body>
</html>
利用vue做出简易的跑马灯效果
猜你喜欢
转载自blog.csdn.net/stphencurry/article/details/115051201
今日推荐
周排行