Vue 实现跑马灯的效果。
效果图
**功能讲解：**当点击开始按钮，跑马灯效果开始进行，文字滚动消失和显示，循环滚动，点击停止按钮，文字不再滚动，停留在当时显示的文字页面。
代码演示
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue/dist/vue.js"></script><style>[v-cloak]{display: none;}</style></head><body><div id="div1"><input type="button" value="开始" id="btn1" @click="begin"><input type="button" value="停止" id="btn2" @click="stop"><br><h4>{{msg}}</h4></div></body><script>var wm = new Vue({el: "#div1",data: {msg: "今天阳光明媚，操场风筝漫天，大眼成群飞过！",intervalId: null},methods: {begin() {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)},stop() {clearInterval(this.intervalId);this.intervalId = null;}}})</script>
</html>扫一扫关注我的公众号获取更多资讯呦！！！
