この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL で固定されていない位置から文字列要素を抽出する方法
>>: CSS3 を使用して楕円軌道の回転を実装するサンプルコード
外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...
序文MySQL では、Innodb と MyIsam の両方がインデックス構造として B+ ツリーを...
1.まずnpmをアンインストールする sudo npm アンインストール npm -g 2. ノー...
前提条件: nginx には、ngx_http_limit_conn_module モジュールと n...
導入MySQL は、私たちが日常業務で使用する非常に一般的なデータベースです。MySQL は現在 O...
序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...
目次1. MySQL 結合バッファ2. JoinBufferCacheストレージスペースの割り当て3...
1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...
目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...
最近、オンライン セキュリティ スキャンにより、MySQL コネクタに脆弱性が見つかりました。確認し...
目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...
プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...
コード <div class="test"> <div>...
この記事では、Linux 環境で crontab コマンドを使用して、タスクの定期的な実行をスケジュ...
この記事の例では、虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...