レイアウト部分: <div id="アプリ"> <p>{{結果}}</p> <button @click="randomName()">{{txt}}</button> </div> Vue部分: <スクリプト> vm = new Vue({ el:'#app', データ:{ リスト:["シャオイー","リール","ワンサン","土曜日","チャンウー"], // ランダムに名前が付けられたコンテンツの結果:''、 //ボタンのテキストコンテンツ txt: "点呼開始", // プロセス制御スイッチオープン: true、 // タイマースイッチを定義します timer:null }, メソッド: { 動く(){ // 0 から現在の配列の長さまでの乱数を取得します。let random = Math.floor(Math.random()*(this.list.length-0)) // 乱数をリスト配列のランダムな添え字にして、result に割り当て、ページにレンダリングします。this.result = this.list[random] }, ランダム名(){ // プロセス制御スイッチ if(this.open){ // タイマーを定義し、move メソッドを呼び出します this.timer = setInterval(this.move,100) this.txt = 「名前を呼ぶのはやめてください」 this.open = false }それ以外{ // タイマーをクリアする clearInterval(this.timer) this.txt = "点呼開始" this.open = true } } } }) </スクリプト> 結果を表示: Vue で簡単なランダム点呼を行う方法についてはこれで終わりです。Vue でランダム点呼を行う方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: aタグ内のテキストを非表示にして画像を表示するには?360モードレンダリングに対応
>>: Minio 軽量オブジェクト ストレージ サービスのインストールとブラウザの使用チュートリアル
MySQL 内部には至るところにキャッシュがあります。MySQL のソースコードを読むと、キャッシ...
JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...
個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...
なお、この記事では、単に 20.04 ソースに変更する方法を説明するのではなく、20.04 に基づい...
JDKをダウンロードしてインストールするステップ 1: まず、公式 Web サイト http://...
ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...
nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...
目次1. 基本概念酸3.自動コミット4. トランザクション分離レベル5. 同時実行の一貫性の問題6....
目次1.vモデル2. プロパティとイベントのバインディング3. フォーム要素のバインディング3.1 ...
声明:この記事では、Web ページ制作技術を使用して問題を包括的に解決するという考え方を反映して、W...
目次ドラッグアンドドロップの実装ドラッグイベントドラッグして開始リリースゾーンでの移動境界処理、角度...
目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...
目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...
なぜ権限管理が必要なのでしょうか? 1. コンピュータ リソースは限られているため、コンピュータ リ...
目次方法 1: ルーティング メタ情報 (meta)方法 2: ルーティング テーブルを動的に生成す...