Vueはランニングライトのシンプルな効果を実現
|
この記事では、マーキーのシンプルな効果を実現するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 1. マーキー効果
説明: 「サポート」ボタンをクリックするとテキストが左にフロートし、「一時停止」ボタンをクリックすると現在のフロートが停止します。
2. 完全なコード (注: vue.js ファイルをコードに導入する必要があります。このファイルはディレクトリの場所に応じて導入されます。具体的な場所はコード内にコメントされています)
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>マーキー</title>
<!-- vue.js ファイルをインポート-->
<script src="../vue.js"></script>
<スタイル タイプ="text/css">
＃アプリ{
パディング: 20px;
}
</スタイル>
</head>
<本文>
<div id="アプリ">
<button @click="run">サポート</button>
<button @click="stop">一時停止</button>
<h3>{{メッセージ}}</h3>
</div>
<スクリプト>
新しいVue({
el:"#アプリ",
データ：{
メッセージ：「友よ、友よ、ネズミが米を愛するように、私はあなたたちを愛しているよ～～～！」
timer:null //データのタイマーを定義します。デフォルト値は null です
},
方法:{
走る（）{
// タイマーが割り当てられている場合は、if(this.timer){return} を返します。
this.timer = setInterval(() => {
// msg は配列に分割されます var arr = this.msg.split('');
// shift は削除して削除したものを返し、push は末尾に追加します // 配列の最初の要素を末尾に配置します arr.push(arr.shift());
// arr.join('') は配列を文字列に接続し、それを msg にコピーします
this.msg = arr.join('');
},100)
},
停止（）{
//タイマーをクリアする clearInterval(this.timer);
//タイマーをクリアした後、タイマーを再度nullに設定する必要があります
this.timer = null;
}
}
})
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dockerがコンテナを起動するたびに、IPとホストが指定した操作が実行されます。
推薦する
モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します
仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...
CSS3 で @media を使用して Web ページの適応を実現するためのサンプル コード
現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...
CSSリンクと@importの違いの詳細な説明
HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...
MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...
Mysql 文字列の傍受と指定された文字列内のデータの取得
序文: 正規表現のインターセプションに似た、MySql フィールドの文字列から特定の文字を抽出すると...
Docker MySQLコンテナデータベースへの変更が有効にならない問題を解決する
公式の MySQL イメージを使用するには、構成ファイル、DB データ ファイル ディレクトリなどの...
Nginx の Docker インストールの問題とエラー分析
質問： DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...
エレメントアバターアップロード練習
この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...
Nginx で limit_req_zone を使用して同じ IP へのアクセスを制限する方法
Nginx は、ngx_http_limit_req_module モジュールの limit_req...
Zabbixで監視する必要があるホストを追加するための詳細な手順
監視ホストの追加ホスト 192.168.179.104 が zabbix 監視項目に追加されます (...
mysql 結合クエリ (左結合、右結合、内部結合)
1. MySQLの一般的な接続INNER JOIN (内部結合、または等価結合): 2 つのテーブ...
Linux (Ubuntu) ユーザーがログイン時に N 回連続して間違ったパスワードを入力すると、システムは自動的に X 分間ロックされます。
1. PAM設定ファイルを編集する sudo vim /etc/pam.d/ログイン2行目に以下を...
DockerでPython環境をパッケージ化するプロセスの詳細な説明
docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...
Vue3 の emitting と attr の違いの分析
目次結論は実践分析拡張機能要約する結論は親コンポーネントでカスタム イベントが定義されている場合、子...
10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ
Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...