Vue實(shí)現(xiàn)簡(jiǎn)易跑馬燈效果
更新時(shí)間：2022年05月18日 16:37:24 作者：曉宇碼匠
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下
一個(gè)簡(jiǎn)單的跑馬燈效果，就是如下這種效果
Vue跑馬燈效果：
1.分析
a.點(diǎn)擊"加油"按鈕綁定一個(gè)點(diǎn)擊事件，使用v-on或者縮寫:"@"
b.在按鈕的事件處理函數(shù)中，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到 msg 字符串，然后 調(diào)用 字符串的 substring 來(lái)進(jìn)行字符串的截取操作，把 第一個(gè)字符截取出來(lái)，放到最后一個(gè)位置即可；
為了實(shí)現(xiàn)點(diǎn)擊下按鈕，自動(dòng)截取的功能，需要把 2 步驟中的代碼，放到一個(gè)定時(shí)器中去；
2.實(shí)現(xiàn)
2.1、綁定事件
<input type="button" value="加油" @click="lang">
<input type="button" value="低調(diào)" @click="stop">
<script>
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? msg: '加油，小強(qiáng)，你最棒~~！',
? ? ? ? intervalId: null // 在data上定義 定時(shí)器Id
? ? ? },
? ? ? methods: {
? ? ? ? lang() {
? ? ? ? },
? ? ? ? stop() {?
? ? ? ? }
? ? ? }
? ? })
</script>2.2、動(dòng)態(tài)截取加定時(shí)
var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? msg: '加油，小強(qiáng)，你最棒~~！',
? ? ? ? intervalId: null // 在data上定義 定時(shí)器Id
? ? ? },
? ? ? methods: {
? ? ? ? lang() {
? ? ? ? ? // 獲取到頭的第一個(gè)字符
? ? ? ? ? // this
? ? ? ? ? if (this.intervalId != null) return;
? ? ? ? ? this.intervalId = setInterval(() => {
? ? ? ? ? ? var start = this.msg.substring(0, 1)
? ? ? ? ? ? // 獲取到 后面的所有字符
? ? ? ? ? ? var end = this.msg.substring(1)
? ? ? ? ? ? // 重新拼接得到新的字符串，并賦值給 this.msg
? ? ? ? ? ? this.msg = end + start
? ? ? ? ? }, 400)
? ? ? ? ? // 注意： VM實(shí)例，會(huì)監(jiān)聽自己身上 data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會(huì)自動(dòng)把 最新的數(shù)據(jù)，從data 上同步到頁(yè)面中去；【好處：程序員只需要關(guān)心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁(yè)面】
? ? ? ? },
? ? ? ? stop() {?
? ? ? ? }
? ? ? }
? ? })2.3、取消定時(shí)器
stop() {?
?? ??? ?// 停止定時(shí)器
? ? ? ? clearInterval(this.intervalId)
? ? ? ? // 每當(dāng)清除了定時(shí)器之后，需要重新把 intervalId 置為 null
? ? ? ? this.intervalId = null;
}2.4、完整代碼
<!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">
? <title>Document</title>
? <!-- 1. 導(dǎo)入Vue包 -->
? <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
? <!-- 2. 創(chuàng)建一個(gè)要控制的區(qū)域 -->
? <div id="app">
? ? <input type="button" value="加油" @click="lang">
? ? <input type="button" value="低調(diào)" @click="stop">
? ? <h4>{{ msg }}</h4>
? </div>
? <script>
? ? // 分析：
? ? // 1. 給 【浪起來(lái)】 按鈕，綁定一個(gè)點(diǎn)擊事件 ? v-on ? @
? ? // 2. 在按鈕的事件處理函數(shù)中，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到 msg 字符串，然后 調(diào)用 字符串的 substring 來(lái)進(jìn)行字符串的截取操作，把 第一個(gè)字符截取出來(lái)，放到最后一個(gè)位置即可；
? ? // 3. 為了實(shí)現(xiàn)點(diǎn)擊下按鈕，自動(dòng)截取的功能，需要把 2 步驟中的代碼，放到一個(gè)定時(shí)器中去；
? ? // 注意：在 VM實(shí)例中，如果想要獲取 data 上的數(shù)據(jù)，或者 想要調(diào)用 methods 中的 方法，必須通過(guò) this.數(shù)據(jù)屬性名 ?或 ?this.方法名 來(lái)進(jìn)行訪問(wèn)，這里的this，就表示 我們 new 出來(lái)的 ?VM 實(shí)例對(duì)象
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? msg: '加油，小強(qiáng)，你最棒~~！',
? ? ? ? intervalId: null // 在data上定義 定時(shí)器Id
? ? ? },
? ? ? methods: {
? ? ? ? lang() {
? ? ? ? ? // console.log(this.msg)
? ? ? ? ? // 獲取到頭的第一個(gè)字符
? ? ? ? ? // this
? ? ? ? ? if (this.intervalId != null) return;
? ? ? ? ? this.intervalId = setInterval(() => {
? ? ? ? ? ? var start = this.msg.substring(0, 1)
? ? ? ? ? ? // 獲取到 后面的所有字符
? ? ? ? ? ? var end = this.msg.substring(1)
? ? ? ? ? ? // 重新拼接得到新的字符串，并賦值給 this.msg
? ? ? ? ? ? this.msg = end + start
? ? ? ? ? }, 400)
? ? ? ? ? // 注意： VM實(shí)例，會(huì)監(jiān)聽自己身上 data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會(huì)自動(dòng)把 最新的數(shù)據(jù)，從data 上同步到頁(yè)面中去；【好處：程序員只需要關(guān)心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁(yè)面】
? ? ? ? },
? ? ? ? stop() { // 停止定時(shí)器
? ? ? ? ? clearInterval(this.intervalId)
? ? ? ? ? // 每當(dāng)清除了定時(shí)器之后，需要重新把 intervalId 置為 null
? ? ? ? ? this.intervalId = null;
? ? ? ? }
? ? ? }
? ? })
? </script>
</body>
</html>最終效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
幾個(gè)你不知道的技巧助你寫出更優(yōu)雅的vue.js代碼
本文參考自油管上某個(gè)國(guó)外大神的公開演講視頻，學(xué)習(xí)了一下覺(jué)得很不錯(cuò)，所以在項(xiàng)目中也使用了這些不錯(cuò)的技巧。趁周末有空，寫個(gè)博客記錄一下2018-06-06
vue在線預(yù)覽word、excel、pdf、txt、圖片的方法實(shí)例
最近工作中遇到了一個(gè)需要在線預(yù)覽文件的需求,所以這篇文章主要給大家介紹了vue在線預(yù)覽word、excel、pdf、txt、圖片的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
解決element ui select下拉框不回顯數(shù)據(jù)問(wèn)題的解決
這篇文章主要介紹了解決element ui select下拉框不回顯數(shù)據(jù)問(wèn)題的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue基礎(chǔ)之事件v-onclick="函數(shù)"用法示例
這篇文章主要介紹了vue基礎(chǔ)之事件v-onclick="函數(shù)"用法,結(jié)合實(shí)例形式分析了vue.js事件v-on:click="函數(shù)"的data數(shù)據(jù)添加、點(diǎn)擊響應(yīng)、以及留言本功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
打開尤大大的GitHub，發(fā)現(xiàn)多了個(gè)叫 petite-vue 的東西,Vue3 和 Vite 還沒(méi)學(xué)完呢，又開始整新東西了？本文就來(lái)介紹一下2021-07-07
下面小編就為大家分享一篇基于vue1和vue2獲取dom元素的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue項(xiàng)目打包成桌面快捷方式(electron)的方法
本文主要介紹了vue項(xiàng)目打包成桌面快捷方式(electron)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06 
Vue使用pinia管理數(shù)據(jù)pinia持久化存儲(chǔ)問(wèn)題
這篇文章主要介紹了Vue使用pinia管理數(shù)據(jù)pinia持久化存儲(chǔ)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03