この記事では、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 を使用して楕円軌道の回転を実装するサンプルコード
序文:テーブルをクリアしたいときは、truncate ステートメントをよく使用します。ほとんどの場合...
序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...
目次1. カーソルとは何ですか? 2. カーソルの使い方1. カーソルを宣言する2.カーソルを開く3...
この記事の本文を始める前に、まず ffmpeg プログラムをインストールする必要があります (Lin...
ワイルドカードのカテゴリ: %パーセント ワイルドカード: 任意の文字が任意の回数出現できることを示...
序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...
JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...
最初のステップはmysqlコンテナを作成することです docker exec -it コンテナID ...
MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...
1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...
序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...
HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...
絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...
MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...
1. リストシンボルを設定するlist-style-type: attribute; //リストの...