快捷導(dǎo)航

Vue3實(shí)現(xiàn)跑馬燈效果

更新時間：2022年04月08日 08:29:25 作者：穩(wěn)重聰頭

這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)跑馬燈效果，可以更換顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue3實(shí)現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下

先看效果：

html部分代碼

<div class="app">
?? ??? ??? ?<p :class="{tabcolor:color}">{{str}}</p>
?? ??? ??? ?<button @click="play">開始</button>
?? ??? ??? ?<button @click="stop">停止</button>
</div>

注意： :class="{tabcolor:color}" 是給<p></p>標(biāo)簽內(nèi)的文字加上一個顏色，當(dāng)我們點(diǎn)擊開始按鈕的時候。

CSS部分代碼

.tabcolor {
?? ??? ??? ??? ?color: cornflowerblue;
?? ??? ??? ?}

CSS部分的代碼很簡單，就是給了一個添加顏色的類。

Vue部分代碼

Vue.createApp({
?? ??? ??? ?data() {
?? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ?str: "你好啊，我是穩(wěn)重聰頭~",
?? ??? ??? ??? ??? ?id: null,
?? ??? ??? ??? ??? ?color: false,
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?play() {
?? ??? ??? ??? ??? ?clearInterval(this.id);
?? ??? ??? ??? ??? ?this.color = !this.color;
?? ??? ??? ??? ??? ?this.id = setInterval(() => {
?? ??? ??? ??? ??? ??? ?this.str = this.str.slice(1) + this.str.slice(0, 1)
?? ??? ??? ??? ??? ?}, 800)
?? ??? ??? ??? ?},
?? ??? ??? ??? ?stop() {
?? ??? ??? ??? ??? ?clearInterval(this.id);
?? ??? ??? ??? ??? ?this.color = false;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}).mount(".app")

分析：

1、data上定義一個字符串，這個字符串就是要在<p></p>標(biāo)簽里進(jìn)行滾動的。
2、給開始和關(guān)閉按鈕，綁定事件：v-on; @cliick就是v-on的簡寫。
3、在按鈕的事件函數(shù)中，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到str字符串，然后調(diào)用字符串 slice 來進(jìn)行字符串的截取操作，把第一個字符截取出來，放到最后一個位置即可。
4、為了實(shí)現(xiàn)最終結(jié)果，自動截取的功能，需要把步驟三的代碼放到一個定時器中去。

最后在送上完整代碼

<!DOCTYPE html>
<html lang="en">
?
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
?? ??? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
?? ??? ?<title>Document</title>
?? ??? ?<script src="./js/vue.js"></script>
?? ??? ?<style type="text/css">
?? ??? ??? ?.tabcolor {
?? ??? ??? ??? ?color: cornflowerblue;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?
?? ?<body>
?? ??? ?<div class="app">
?? ??? ??? ?<p :class="{tabcolor:color}">{{str}}</p>
?? ??? ??? ?<button @click="play">開始</button>
?? ??? ??? ?<button @click="stop">停止</button>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?Vue.createApp({
?? ??? ??? ?data() {
?? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ?str: "你好啊，我是穩(wěn)重聰頭~",
?? ??? ??? ??? ??? ?id: null,
?? ??? ??? ??? ??? ?color: false,
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?play() {
?? ??? ??? ??? ??? ?clearInterval(this.id);
?? ??? ??? ??? ??? ?this.color = !this.color;
?? ??? ??? ??? ??? ?this.id = setInterval(() => {
?? ??? ??? ??? ??? ??? ?this.str = this.str.slice(1) + this.str.slice(0, 1)
?? ??? ??? ??? ??? ?}, 800)
?? ??? ??? ??? ?},
?? ??? ??? ??? ?stop() {
?? ??? ??? ??? ??? ?clearInterval(this.id);
?? ??? ??? ??? ??? ?this.color = false;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}).mount(".app")
?? ?</script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: