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とホストが指定した操作が実行されます。
推薦する
24 の実用的な JavaScript 開発のヒント
目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...
Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード
1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...
回転するフリップカードアニメーションの効果を実現するCSS
回転フリップ効果の CSS アニメーション、具体的な内容は次のとおりです。 1. まず2つのボックス...
CSS3を使用してテキストの垂直配置を実現する方法
最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパ...
MySQL でテーブルデータをクリアする 2 つの方法とその違い
MySQL でデータを削除するには 2 つの方法があります。切り詰めは大まかな伐採の一種である削除は...
Vue はウェブページの言語切り替えの国際化を実装します
1. 基本的な手順1: yarn add vue-i18nをインストールするこのパスに新しい .js...
JavaScript strictモードの概要 strictを使用する
目次1. 概要1.1 厳密モードとは何ですか? 1.2 厳密モードの目的2. 厳密モードを有効にする...
ウェブページのFOUC問題によるウェブページの混乱の解決策
FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...
Linux カーネル デバイス ドライバー仮想ファイル システムに関する注意事項
/******************** * 仮想ファイルシステム VFS **********...
Dockerコンテナでルート権限を取得する方法
まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...
MySQL の binlog ログと、binlog ログを使用してデータを回復する方法を説明します。
ご存知のとおり、binlog ログは MySQL データベースにとって非常に重要です。万が一、データ...
MySQL 5.7.20 の解凍バージョンをインストールするときに遭遇する落とし穴 (推奨)
MySQL公式サイト: https://www.mysql.com/downloads/ http...
HTML コードの書き方に関する提案のまとめ
リソースファイルのプロトコルを省略する画像、メディアファイル、スタイル、スクリプトの URL では、...
Nginx ロケーション設定（ロケーションのマッチング順序）の詳細な説明
ロケーションは「位置指定」を意味し、主にさまざまな位置指定のための URI に基づいています。これは...
Docker 環境で JMeter+Grafana+influxdb ビジュアル パフォーマンス監視プラットフォームを構築するチュートリアル
目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...