Vue 跑马灯
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>掃一掃關注我的公眾號獲取更多資訊呦！！！
總結
- 上一篇： 安装引导黑屏_给电脑安装系统老是装不上，
- 下一篇： html5倒计时秒杀怎么做,vue 设