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とホストが指定した操作が実行されます。
推薦する
MacでNodeとnpmを完全にアンインストールする方法
npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...
MySQL で 2 つのセットの交差/差/和を取得する方法
MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...
Linux 上の Nginx に複数のバージョンの PHP をインストールする
サーバーの LNPM 環境をインストールして構成する場合、複数のバージョンの PHP の共存を考慮す...
Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)
学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...
Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ（推奨）
2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...
UTF8 でエンコードされた Web ページにファイルが含まれている場合の、ページの前の空白行の解決方法
<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...
フロントエンド開発における一般的なテクニックのまとめ
1. 記事タイトルリストの右側に日付を表示する方法:コードをコピーコードは次のとおりです。 &l...
スペース均等互換性の問題を解決する2つの方法についての簡単な説明
flex は 2009 年のリリース以来、ほぼすべてのブラウザでサポートされています。シンプルでレス...
MySQL 10進数符号なし更新負数を0に変換
今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...
Vue 開発ツリー構造コンポーネント (コンポーネント再帰)
この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は...
Vue コンポーネント値転送中のデータ損失の分析と解決
序文前回の記事では、JavaScript の 2 つのデータ型、基本型と参照型、および参照型の浅いコ...
Vue で動的パラメータと計算プロパティを使用する方法
1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...
Linux および Unix サーバーのセキュリティを強化する方法
ネットワーク セキュリティは非常に重要なトピックであり、サーバーはネットワーク セキュリティにおける...
Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明
目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...
MySQL テーブルを削除するときに外部キー制約を無視するシンプルな実装
テーブルを削除することはあまり一般的ではありませんが、特に外部キーの関連付けがあるテーブルの場合は、...