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とホストが指定した操作が実行されます。
推薦する
CentOS7 で MySQL のスケジュールされた自動バックアップを実装する方法
実稼働環境で起こる最も嬉しいことは、シナリオによっては、更新または削除時にパラメータを無視せざるを得...
Dockerfile における ENV 命令の具体的な使用法の詳細な説明
1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...
Vue でデータコレクターを設計する
目次シナリオ中核問題ステータス監視状態監視の利点国家監視の欠点復興実行のアイデア依存関係の収集要約す...
Nginx ロケーションマッチングルールの例
1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...
nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明
序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...
JS配列インデックス検出におけるデータ型の問題の詳細な説明
WeChat アプレット プロジェクトを書いていたとき、その中に「都市選択」機能がありました。作者は...
Linux FTP匿名アップロードとダウンロードが自動的に開始される問題を解決する
勉強や仕事で FTP サーバーを頻繁に使用する場合は、起動時に自動的に起動するように設定できます。設...
CocosCreatorで複数のタイマーを使用する方法の詳細な説明
1.タイムアウトを設定する3 秒後に abc を印刷します。一度だけ実行します。 setTimeou...
MySQLが大量のデータを処理する際にクエリ速度を最適化するいくつかの方法
実際に参加したプロジェクトでは、MySQL テーブルのデータ量が数百万に達すると、通常の SQL ク...
ボタンをクリックした後のCSS読み込み効果を実現する
自社製品にクリック後1～2秒待機時間があるボタン（確認メールを送信する）があるため、クリック後の1～...
JavaScript 戦略パターンを使用してフォームを検証する方法
目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...
CSS で中空効果を実装するサンプルコード
効果原理主にCSSグラデーションを使用して、切り取りを必要としない背景のくり抜きを実現します。クーポ...
MySQLアカウントのパスワード変更方法（概要）
序文：データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...
Nginxはリバースプロキシを使用して負荷分散プロセス分析を実装します
導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...
MySQL の group by と order by を一緒に使用する方法
テーブル：reward（報酬テーブル）があるとします。テーブル構造は次のようになります。 テーブルt...