Vueはシンプルなマーキー効果を実装します

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容は次のとおりです。

レンダリング

コード

html

<div id="アプリ">
    <button @click="start">開始</button>
    <button @click="stop">停止</button>
    <p>{{メッセージ}}</p>
</div>

ビュー

var アプリ = 新しい Vue({
    el: "#app", // は、現在作成している新しい vue インスタンスがページ上の領域を制御することを示します // data は mvvm 内の m であり、各ページのデータを格納するために使用されます data:{
        メッセージ:「今夜19時30分に李佳琦の生放送ルームをチェックしてください、お見逃しなく~」
        タイマー: null
    },
    方法:{
        始める(){
            // タイマー テキストを使用して時間通りにスクロールします // 矢印関数は this のポイントの問題を解決できます // 矢印関数内の this のポイントは、関数外の this のポイントと一致しています // タイマーが null でない場合にのみタイマーがオンになります if (this.timer != null) return;
            this.timer = setInterval(() => {
                // 最初の文字を取得します var startMsg = this.msg.substring(0,1);
                // 後続の文字をすべて取得します var endMsg = this.msg.substring(1);
                // メッセージを再構成する
                this.msg = endMsg + startMsg;
            },400)
        },

        停止(){
            タイマー間隔をクリアします。
            // タイマーを自分でクリアした後でタイマーを印刷すると、null ではないことがわかるので、 this.timer = null; を再割り当てする必要があります。
        }
    }
});

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue ベースのテキスト マーキー コンポーネント (npm コンポーネント パッケージ)
  • Vueはシンプルなマーキー効果を実装します
  • Vue はシームレスなカルーセル効果 (マーキー) を実現します
  • Vueはマーキースタイルのテキストの水平スクロールを実装します
  • Vueはマーキー効果を実装します
  • Vueはランニングライトのシンプルな効果を実現
  • タイマーを使用してマーキー効果を実現する Vue サンプルコード
  • Vueはシンプルなマーキーを実装する
  • マーキー効果を実現するためのJsとVUE
  • Vueマーキーコンポーネントの使い方の詳細な説明

<<:  MySQL で固定されていない位置から文字列要素を抽出する方法

>>:  CSS3 を使用して楕円軌道の回転を実装するサンプルコード

推薦する

MySQL での Truncate の使用法の詳細な説明

序文:テーブルをクリアしたいときは、truncate ステートメントをよく使用します。ほとんどの場合...

case when文のエラー問題の詳細な説明

序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...

MySQLカーソルの詳細な紹介

目次1. カーソルとは何ですか? 2. カーソルの使い方1. カーソルを宣言する2.カーソルを開く3...

ffmpeg コマンドラインを使用してビデオを変換するためのサンプルコード

この記事の本文を始める前に、まず ffmpeg プログラムをインストールする必要があります (Lin...

Mysql | ワイルドカード(%、_ など)を使用したファジークエリの詳細な説明

ワイルドカードのカテゴリ: %パーセント ワイルドカード: 任意の文字が任意の回数出現できることを示...

Alibaba Cloud Centos6.X でメールを送信する際に発生するさまざまな問題

序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...

画像を表示したり非表示にしたりするための JavaScript

JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...

Dockerでmysqlのルートパスワードを変更する方法

最初のステップはmysqlコンテナを作成することです docker exec -it コンテナID ...

Windows 8 での MySQL 5.6.15 のインストールと設定方法のグラフィック チュートリアル

MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...

React構成サブルーティングの実装

1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...

MySQL の最適化: 高品質の SQL 文を書く方法

序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...

カラーブロックレポート効果の動的な表示を実現する HTML (サンプルコード)

HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...

CSS の子要素を親要素と高い一貫性を持たせる方法

絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...

MySQL における 10 進数型の使用法の簡単な紹介

MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...

CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

1. リストシンボルを設定するlist-style-type: attribute; //リストの...