Vue 使用计时器实现跑马灯效果的实例代码

更新时间：2020-09-04 01:30:01 作者：startmvc

Vue使用计时器实现跑马灯效果，代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><

Vue 使用计时器实现跑马灯效果，代码如下所示：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="../Vue/vue.js"></script>
 <link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
 <title>跑马灯</title>
 <style type="text/css">
 #app button {
 outline: none;
 }
 </style>
</head>
<body>
 <div id="app" style="margin: 20px">
 <button class="btn btn-info" @click='lang'>飞的速度</button>
 <button class="btn btn-info" @click='stop'>猥琐发育</button>
 <div>
 <h4 style="color: red">{{msg}}</h4>
 <img src="buxiang.jpeg" alt="">
 </div>
 </div>
 <script>
 var ve = new Vue({
 el: '#app',
 data: {
 msg: '只有飞速的旋转，才可以止住为的泪水，忘记你的模样。。。',
 intervalId: null,
 },
 methods: {
 // 动起来
 lang() {
 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
 }, 300)
 },
 // 停止运动
 stop() {
 clearInterval(this.intervalId)
 // 重新赋值null
 this.intervalId = null
 }
 }
 })
 </script>
 <script src="lib/jquery/jquery-3.4.1.js"></script>
 <script src="lib/bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

效果