VUE之文字跑马灯效果
生活随笔
收集整理的這篇文章主要介紹了
VUE之文字跑马灯效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.效果演示
2.相關代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/vue-2.4.0.js"></script> </head> <body> <div id="app"><input type="button" value="浪起來" @click="lang"><input type="button" value="低調" @click="stop"><h4>{{msg}}</h4> </div> <script>var vm = new Vue({el: "#app",data: {msg: "猥瑣發育,別浪~~!",interval: null},methods: {lang: function () {console.log(this.msg);var _this = this;_this.interval = setInterval(function () {//獲取第一個字符var start = _this.msg.substring(0, 1);//得到后面的字符var end = _this.msg.substring(1);//重新賦值_this.msg = end + start;}, 400)},stop:function () {//停止定時器clearInterval(this.interval);}}});</script> </body> </html>轉載于:https://www.cnblogs.com/charlypage/p/10166391.html
總結
以上是生活随笔為你收集整理的VUE之文字跑马灯效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 黑盒测试方法之等价类划分
- 下一篇： 软件测试常用的黑盒测试方法有哪些,简述什