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とホストが指定した操作が実行されます。
推薦する
MySQL に大量のデータを挿入する 4 つの方法の例
序文この記事では主に、MySQLに大量のデータを挿入する4つの方法を紹介し、参考と学習のために共有し...
MySQL マスタースレーブ同期メカニズムと同期遅延問題追跡プロセス
序文DBA として、仕事中に MySQL マスターとスレーブの同期遅延の問題に遭遇することがよくあり...
JavaScript ファクトリーパターンの説明
目次シンプルファクトリーファクトリーメソッド安全な工場方法アブストラクトファクトリー要約するシンプル...
MySQL 5.7.10 インストール ドキュメント チュートリアル
1. 依存パッケージをインストールする yum -y インストール gcc-c++ ncurses-...
CSSのborder-radiusプロパティを使用して円弧を設定します
現象： divを一定の振幅で円、楕円などに変更する方法： CSSのborder-radiusプロパテ...
MySqlデータベースの基礎知識のまとめ
目次基本的なデータベース操作2) データベースを表示する3) データベースを選択する4) データベー...
フロントエンドに必要なNginx設定の詳細な説明
Nginx (エンジン x) は、軽量で高性能な HTTP およびリバース プロキシ サーバーであり...
JavaScript マクロタスクとマイクロタスクの実行順序についての簡単な説明
目次1. JavaScriptはシングルスレッドです1. 同期タスク2. 非同期タスク2. タスクキ...
MySQLの日付と時刻の間隔計算の分析例
この記事では、例を使用して、MySQL の日付と時刻の間隔計算について説明します。ご参考までに、詳細...
XHTML でのハイパーリンク タグの使用に関するチュートリアル
ハイパーリンク。「リンク」とも呼ばれます。ハイパーリンクは、私たちが閲覧する Web ページのいたる...
MySQL ファジークエリの使用法 (通常、ワイルドカード、組み込み関数)
目次1. MySQL ワイルドカード ファジー クエリ (%,_) 1-1. ワイルドカードの分類1...
MySQL 8.0 パスワード有効期限ポリシーの詳細な説明
MySQL 8.0.16 以降では、パスワードの有効期限ポリシーを設定できます。今日は、この小さな知...
Ubuntu 16.04 で FTP サーバーを構築するチュートリアル
Ubuntu 16.04 FTP サーバーをビルドするftpをインストールするftp をインストール...
docker を使用して複数のネットワーク インターフェースを持つコンテナーを起動する方法の例
コンテナにネットワークインターフェースを追加する1 デフォルトのネットワークモードでコンテナを実行す...
JavaScript はパスワードボックスの入力検証を実装します
サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...