レイアウト部分: <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 軽量オブジェクト ストレージ サービスのインストールとブラウザの使用チュートリアル
目次DMLステートメント1. レコードを挿入する2. 記録を更新する3. シンプルなクエリレコード4...
1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...
仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...
データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...
目次ケーススタディアカウント残高を更新する直接更新楽観的ロック方式ロックフリーソリューションキューイ...
この記事では、アバター変更機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...
目次効果テキストの作成を開始するまずフォントローダーを作成するフォントライブラリを読み込むテキストジ...
以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...
この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してくださ...
仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...
1. はじめにWHMCS は、ユーザー管理、請求書の支払い、ヘルプ サービスなど、オンライン ビジネ...
目次スイッチも複雑なコードブロックもありませんPythonからのインスピレーション辞書を使用してスイ...
序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...
1. ローカルyumソースを設定する1. ISOイメージをマウントする マウント -o loop /...