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 を使用して楕円軌道の回転を実装するサンプルコード

推薦する

Dockerの基本的なネットワーク構成の詳細な説明

外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...

MySQL でインデックス構造として B+ ツリーを使用する利点は何ですか?

序文MySQL では、Innodb と MyIsam の両方がインデックス構造として B+ ツリーを...

Linux サーバーのクイックアンインストールとノード環境のインストール (簡単に始められます)

1.まずnpmをアンインストールする sudo npm アンインストール npm -g 2. ノー...

Nginx の http リソース リクエスト制限の詳細な説明 (3 つの方法)

前提条件: nginx には、ngx_http_limit_conn_module モジュールと n...

MySQL での r2dbc の使用に関する詳細な理解

導入MySQL は、私たちが日常業務で使用する非常に一般的なデータベースです。MySQL は現在 O...

MySQL で置換操作を使用したときにデータ損失が発生する問題の解決策

序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...

MySQL 結合バッファの原理

目次1. MySQL 結合バッファ2. JoinBufferCacheストレージスペースの割り当て3...

スタイルをより標準化するための CSS の書き方に関する 5 つのヒント

1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...

Vue.js フロントエンド Web ページ ポップアップ非同期動作例の分析

目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...

mysql-connector-java8.0.27 へのアップグレードに関する注意事項

最近、オンライン セキュリティ スキャンにより、MySQL コネクタに脆弱性が見つかりました。確認し...

Vueのハッシュジャンプ原理の詳細な説明

目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...

JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...

Linux 環境で crontab コマンドを使用して、スケジュールされた定期的な実行タスクを設定します (PHP 実行コードを含む)

この記事では、Linux 環境で crontab コマンドを使用して、タスクの定期的な実行をスケジュ...

js で虫眼鏡効果を実現するためのアイデアとコード

この記事の例では、虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...